ES6 中的 Template Literals 与传统字符串的异同
随着前端技术的不断发展，ES6 成为了前端开发必备的技能之一。而其中的 Template Literals（模板字面量） 与传统的字符串又有哪些异同呢？
传统字符串
在使用传统的字符串时，我们会使用单引号（'）或者双引号（"）作为字符串的包裹符号。在字符串的拼接时，我们会使用加号（+）或者字符串方法来将多个字符串连接起来，如下所示：
const name = 'John'; const age = 18; const message = 'My name is ' + name + ' and I am ' + age + ' years old.';
可以看到，这种方式写起来比较繁琐，而且在需要换行或者插入变量时就不那么方便了。而 ES6 中的 Template Literals 则可以很好地解决这些问题。
ES6 中的 Template Literals
在 ES6 中，我们可以使用反引号（`）来包裹字符串，并使用${}来嵌入变量或表达式，如下所示：
const name = 'John';
const age = 18;
const message = `My name is ${name} and I am ${age} years old.`;可以看到，这种写法不仅比传统字符串简洁明了，而且支持换行和表达式等操作。
在使用多行字符串时，我们可以使用反引号（`）直接包裹多个字符串，而不用像传统字符串一样需要使用加号（+）或者换行符（\n）来连接字符串。如下所示：
const message = `Hello, world!`;
除了上述的这些方便之外，ES6 的 Template Literals 还支持标签函数，可以让我们在字符串和变量之间加上额外的逻辑。
-- -------------------- ---- ------- -------- -------------------- ---------- - --------------------- -- --- ---- -- -- - --- - -- -- - ----- ----- -------------------- -- ------- -- --- ------- - --- ------- -- ----------- ------- -- ------------------------ ------- -- ----------- ------- -- ---------- ------ -------- - ----- ---- - ------- ----- --- - --- ----- ------- - -------------- ---- -- ------- --- - -- ------ ----- ------ --------------------- -- --- ---- -- ---- --- - -- -- ----- -----
在上述代码中，tagFunction 就是一个标签函数，它会将字符串和变量拆分成不同的数组，我们可以在这个函数里对这些数据进行一些额外的操作，最后返回处理完毕的字符串。
总结
ES6 中的 Template Literals 不仅在语法上比传统字符串更加方便，而且可以支持更多的特性，如多行字符串和标签函数等。如果你还没有使用 Template Literals，建议去尝试一下，会大大提升你的代码书写效率。
代码示例
使用传统字符串：
const name = 'John'; const age = 18; const message = 'My name is ' + name + ' and I am ' + age + ' years old.'; console.log(message); // 'My name is John and I am 18 years old.'
使用 Template Literals：
const name = 'John';
const age = 18;
const message = `My name is ${name} and I am ${age} years old.`;
console.log(message); // 'My name is John and I am 18 years old.'来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646a0cfd968c7c53b09ce1f9