随着 JavaScript 的不断发展，其标准也在不断更新，其中 ES10（ECMAScript 2019）是最新发布的 JavaScript 标准。其中一个重要的更新是模板字符串的新特性，本文将详细介绍 ES10 中模板字符串的新特性及用法。
什么是模板字符串？
在 ES6 标准中，模板字符串是一种新增的字符串表示法，它允许在字符串中嵌入表达式，并且可以跨越多行。使用一对反引号（`）声明模板字符串，并在需要插入表达式的地方使用${ }包裹表达式。例如：
const name = "Alice";
const age = 18;
const intro = `My name is ${name}, and I am ${age} years old.`;
console.log(intro);
// 输出：My name is Alice, and I am 18 years old.ES10 中的新特性
在 ES10 中，模板字符串新增了一些功能，包括标签模板、trimming，以及 raw 等。
标签模板
标签模板是一种特殊的模板字符串形式，它允许我们把模板字符串传递给一个函数，并在函数内进行处理。标签模板的写法是在模板字符串前加上函数名，并用反引号包裹模板字符串。例如：
function add(x, y) {
return x + y;
}
const result = add`The result is ${1+2}.`;
console.log(result);
// 输出：The result is 3.在这个例子中，我们定义了一个名为 add 的函数，并在模板字符串前加上了 add 函数名。在 add 函数内部，我们可以通过 arguments 对象访问模板字符串和其中表达式的值，进而进行一些处理。
标签模板有很多应用场景，比如我们可以使用它来定制日期、数字等类型的输出格式。
Trimming
在 ES6 中，模板字符串有一个缺陷，就是如果在模板字符串的开始或结尾处添加空格，它们会被保留在生成的字符串中。为了解决这个问题，ES10 中模板字符串新增了 trimming 功能，也就是在模板字符串前加上一个 # 号，就可以自动去除模板字符串头部和尾部的空格。
-- -------------------- ---- ------- ----- --- - - ----- ------ -- ----------------- --------------- - ----- ----------------------------- --------------------------- --------------- - ------------ --------------- - ---------------- --------------- - ----------------- -- --- -- ----- ------ -- - ----- ------ -- ----- ------ -- ----- ------ -- ------ ------ -- ------ ------ -- ----- -------
在这个例子中，我们定义了一个包含空格的字符串，并进行了一系列的操作来演示 trimming 的效果。
需要注意的是，trimStart 和 trimLeft 方法的效果是一样的，都是去除头部空格；trimEnd 和 trimRight 方法的效果也是一样的，都是去除尾部空格。
Raw
在 ES6 中，我们可以通过给 String 对象原型添加一个 raw 属性来获取模板字符串的原始形式，例如：
String.raw`Hello\nworld`; // 输出：Hello\nworld
而 ES10 中，模板字符串本身就支持 raw 属性，我们可以通过模板字符串的 raw 属性来获取它的原始表现形式。
const str = String.raw`Hello\nworld`; console.log(str); console.log(str.raw); // 输出： // Hello\nworld // ["Hello\\nworld"]
在这个例子中，我们使用 String.raw 方法得到一个字符串，在输出时会直接打印"\n"，而不是换行。然后我们使用模板字符串的 raw 属性，再次得到了"Hello\nworld"，其中两个反斜杠代表一个实际的反斜杠。
总结
ES10 中模板字符串的新特性包括标签模板、trimming 和 raw，它们都为开发人员带来了更多灵活性和便利性。本文从每个新特性角度出发，详细介绍了它们的用法及应用场景，并提供了相应的代码示例。希望读者们可以对这些新特性有更深入的了解，并可以在实际开发中灵活运用它们，提高自身的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647d3e69968c7c53b080e013