哎呀，这模板字面量啊，听着挺较高较大上的，其实就是个字符串的写法。不过它可不是普通的字符串， 太刺激了。 它有一些…呃…较高级用法。别跟我说你没听说过！ES6的时候就出来了当前谁没用啊？

啥是模板字面量？先说清楚！

简洁模板字面量是用反引号 包起来的字符串。跟双引号或者单引号不一样！用反引号能够写更多行文本，还能直接在里面放变量或者表达式。这比用加号拼接字符串要方便更多了更少打几个字母！

变量插值较大法良好

当前这个是最基本的了。你想把一个变量的值字 一言难尽。 符串里用 `${}` 包起来就行了。比如：

const name = "较小明";
const age = 20;
const message = `较大家良好， 我叫${name}，今年${age}岁了。`; // 注意这里是反引号！

是不是很简洁？不用 `+` 加号来拼接了感觉像在写菜谱一样！

较高级用法来了！准备良好了吗？

标签模板 – 听起来就很厉害

这玩意儿可有点意思了。你能够给你的模板字符串添加一个函数作为“标签”。当前这个函数能够控制模板的解析方式。啥意思呢？简洁说就是你能够自己定义怎么把模板里的内容处理一下，哭笑不得。。

啥时候用标签模板呢？

• 全球化 : 把你的应用翻译成不同的语言的时候用到。 你能够根据不同的语言选择不同的翻译版本
• 避免XSS : 确保用户输入的内容不会被当作代码落实
• 样式化输出: 动态生成 CSS 代码

举个栗子

function highlight { // 定义一个标签函数 named highlight strings 是包含各个一部分字符的数组 values是传递给 template 的参数 function result { let resultString = ""; for  { resultString += strings; if  { resultString += values; } } return resultString;} return result;}; // 用标签进行渲染 const name = "李四"; const message = `你良好, ${name}!`; // 采用 highlight 函数渲染消息

逻辑运算符的魔法

这是最酷的用法之一! 你能够用 JavaScript 的逻辑运算符 或者空值合并运算符 来处理

const userAge = null; // 用户年龄有可能为空；注意当前这个! const message = `您的年龄是 ${userAge ?? '未填写'} 岁`; //如果userAge为null 或 undefined ，则体现 "未填写" 原始字符串解析 – 不要转义字符啦! `string.raw` 能够让你不用转义特殊字符 。这对于生成 HTML 或者 SQL 代码非常有用。 const html = `${name}`; //不用转义换行符啦！ 其他一些奇奇怪怪的应用 CSS in JS： 直接在 JavaScript 代码中写 CSS样式SQL可靠构造： 避免SQL注入袭击 一下 **：** 模板字面量不仅仅是简洁的字符串拼接工具。 它提供给了很更多强较大较大的功能, 能够让你的代码更简洁、更可靠、更灵活。 虽然一启动有可能有点不容简单明白, 但只要更多练习几次就熟练了!，太暖了，我舒服了。。