详解ES6二-JavaScript模板字面量``与${}

ECMAScript通过模板字面量为字符串提供了新的特性，主要在于以下方面：

多行字符串
基本的字符串格式化，将变量的值嵌入字符串的能力
HTML转义，向HTML插入经过安全装换后的字符串的能力

基础语法

使用反引号(``)描述字符串，例如 `hello` 。基本上与单双引号用法一样，区别在于使用反引号(``)不会忽略里面的换行符，如下面的例子：

在这里插入图片描述

注意代码中换行后的缩减，也会输出到控制台中。如果我们想要在代码中对齐，可以考虑这样：

var html = `
<div>
    <h1>Title</h1>
</div>`.trim();

repeat()方法

repeat()方法可以重复输出字符串，举个例子：

比如在代码格式化工具中创建缩进级别：

let indent = " ".repeat(4),indentLevel = 0;
//当需要增加缩进时
let newIndent = indent.repeat(++indentLevel);

占位符

这个类似于bash脚本的语法，使用占位符可以把JavaScript表达式嵌入到字符串中，例如：

let count = 10,
	price = 0.25, 
	messsage = `${count} items cost $${(count * price).toFixed(2)}.`;
console.log(messsage);//10 items cost $2.50.

可以看到，只需要在模板字面量的字符串中加入${表达式}即可。

标签模板

这是一个扩展功能，如果你想用自定义的方法处理模板字面量，就可以使用标签模板。其语法是：

let message = tag`Hello World!`;

其中，tag即模板标签。

要求模板标签是一个函数，在这个函数中处理模板字面量，先举个极端的例子：

let passthru = function(){return "hello";};
let count = 10,
	price = 0.25, 
	messsage = passthru`${count} items cost $${(count * price).toFixed(2)}.`;
console.log(messsage);//hello

可以看到标签返回的字符串取代了模板字面量的字符串。

下面用自定义函数模拟模板字面量举个例子：

let passthru = function (literals, ...substitutions) {
    console.log(literals)
    console.log(substitutions)
    let result = "";
    for (let i = 0; i < substitutions.length; i++) {
        result += literals[i];
        result += substitutions[i];
    }
    result += literals[literals.length - 1];
    return result + ' (by own)';
};
let count = 10,
    price = 0.25,
    messsage = passthru `${count} items cost $${(count * price).toFixed(2)}.`;
console.log(messsage);

@H_502_63@

tips: JavaScript中三个点（…）是什么意思

可以看到，函数接收两个参数，第一个参数是一个字符串数组，其元素为字面量里面非占位符的字符串，第二个参数是一个序列化参数，其元素是字面量里面占位符表达式计算后的结果。

Srting.raw()

如果不想要解释转义字符，可以使用Srting.raw()，例如：

String.raw`Hi\n${2+3}!`;// 'Hi\n5!'

同样的，在模板标签中可以使用literals.raw[i]来表示不解释转义字符的字符串。

· 关注微信公众号【技术斋】，发现更多精彩！

· 公众号《投稿及转载说明》

详解ES6二-JavaScript模板字面量``与${}

相关推荐