阅读 41

ES6:模板字符串

前言

传统的字符串模板

在传统的Javascript中,如果我们对DOM进行操作,字符串模板通常采用加号( + )进行字符串拼接。

ES6模板字符串

反引号( ` )表示普通的字符串,也可以表示多行字符串(随意换行),同时还可以插入变量(代替传统的加号拼接)。

简介

模板字符串使用反引号 (``) 来代替普通字符串中的用双引号和单引号。 模板字符串可以包含特定语法(${expression})的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数,该函数负责将所有的部分连接起来。

如果一个模板字符串由表达式开头,则该字符串被称为带标签的模板字符串,该表达式通常是一个函数,它会在模板字符串处理后被调用,在输出最终结果前,你都可以通过该函数来对模板字符串进行操作处理。在模版字符串内使用反引号(`)时,需要在它前面加转义符(\)。

注意:模板字符串中的换行和空格会被保留,并且如果模板字符串中的变量没有声明,将报错。

后续,我们所有实例都采用对比传统的字符串进行演示。

基本用法

// 传统字符串拼接
var str1 = "我是:";
var str2 = "学生";
window.alert(str1 + "一名" + str2);//我是:一名学生

// ES6模板字符串拼接
var str1 = "我是:";
var str2 = "学生";
window.alert(`${str1}一名${str2}`);//我是:一名学生
复制代码

可以看到,模板字符串拼接更加简洁直观。

你也可以轻松获得多行字符串:

// 传统写法
var str1 = "我是:";
var str2 = "学生";
console.log(str1+'\n'+str2);
/*
我是:
学生
*/

// ES6模板字符串写法
var str1 = "我是:";
var str2 = "学生";
console.log(`${str1}
${str2}`);
/*
我是:
学生
*/
复制代码

在新行中插入的任何字符都是模板字符串中的一部分。

如果大括号内部是一个字符串,将会原样输出:

console.log(`hello ${'ES6'} !`)
// hello ES6 !
复制代码

插入表达式

在普通字符串中嵌入表达式(任意表达式或对象属性等),传统方法略显臃肿,字符串模板更优雅。

// 传统写法
var n1 = 10;
var n2 = 20;
console.log("n1+n2="+(n1+n2));//n1+n2=30

// ES6模板字符串写法
var n1 = 10;
var n2 = 20;
console.log(`n1+n2=${n1+n2}`);//n1+n2=30
复制代码

可以看到,不仅层次分明,还有较强的直观性。

模板字符串嵌套

模板字符串还可以进行嵌套使用。

const data = `
    ·1·
`;
//     ·1·
复制代码

如果需要引用模板字符串本身,在需要时执行,可以写成函数:

let data = (str) => `____${str}`;
console.log(data('123'));
// ____123
复制代码

模板字符串调用函数

同样,模板字符串支持调用函数,${函数名}即可。

// 定义一个函数
function demo(){
    return `Hello ES6!`
}
// 调用demo()
window.alert(`我要调用demo():${demo()}`);
// 我要调用demo():Hello ES6!
复制代码

带标签的模板字符串

更高级的形式的模板字符串是带标签(tag)的模板字符串。标签使您可以用函数解析模板字符串。标签函数的第一个参数包含一个字符串值的数组。其余的参数与表达式相关。 最后,你的函数可以返回处理好的的字符串(或者它可以返回完全不同的东西)用于该标签的函数的名称可以被命名为任何名字。

说白了,就是通过一个默认的函数对其中的插值进行运算和连接,加在模板字符串前面加一个标签(函数),字符串输出前会自动调用该函数进行运算处理后,然后再输出出来。就像vue、react等框架中过滤器大同小异。

// 标签函数(array,n1,n2)
// array是字符串的字面量的一个数组
// n1/n2:一个表达式的计算结果

// 变量
var name = '小李';
var age = 102;

// 标签函数
function new_fun(strings, n1,n2) {

  // 数组(不理解后面有图示)
  var str0 = strings[0]; // 我是
  var str1 = strings[1]; // 今年
  var n1 = `*`; // *
  var n2 = `|`;// |

  // 最终都需要return返回(否则报错)
  return str0 + n1 + str1 + n2 + `~~我是尾巴`;//顺序改变则输出改变

}

// 调用标签函数(new_fun)
var output = new_fun`我是 ${ name } 今年 ${ age }`;

// 输出打印
console.log(output); // 我是 * 今年 |~~我是尾巴
复制代码

注意:最终都由return返回,否则报错。

文章分类
前端
文章标签