随着前端技术的不断进步，JavaScript 也在不断升级完善，ES9 提出的 Template Literals（模板字符串）是一项非常有用的新增特性。正如其名称，它们让前端字符串扩展更加轻松方便，同时还可以大大优化代码的可读性和易用性。
什么是 Template Literals？
在 ES9 中，Template Literals 是指使用反引号（`）和 ${} 插入符将表达式嵌入到字符串中的一种方法，它本质上是一种字符串模板，可以实现更加灵活和方便的字符串处理。相比传统的字符串连接方式，Template Literals 更加方便快捷，同时还可以实现更多高级功能。下面是一个示例：
let name = 'John';
console.log(`Hello, ${name}!`);在这个例子中，我们使用反引号包裹了字符串，同时在其中使用 ${} 插入符将变量 name 插入到了字符串中。这样，我们就可以获得 "Hello, John!" 的输出结果。
Template Literals 的优点
相比传统的字符串连接方式，使用 Template Literals 有以下优点：
更加灵活方便：Template Literals 可以快速嵌入变量、函数调用等表达式，而无需使用 + 连接符进行繁琐的字符串连接操作。
可以实现多行字符串：使用反引号包裹的字符串可以实现多行字符串，不用再使用 \n 等换行符代替换行。
更好的可读性和易用性：Template Literals 的使用可以增强代码的可读性和易用性，使代码更加清晰易懂。
Template Literals 实例
下面我们来看一个更为具体的例子，使用 Template Literals 实现一个简单的字符串生成器：
-- -------------------- ---- -------
-------- -------------------- ---- ------- -
------ -
---- -------------
----- ----------------------------
----- ---------------------------
-------- --- ------ - ------ ------------------------ - ------ --------------------------
------
--
-
-------------------------------- --- ---------在这个例子中，我们定义了一个函数 generateString，使用 Template Literals 生成了一个包含用户信息的 html 字符串。通过使用 ${} 插入符，我们可以方便地将变量嵌入到字符串中，同时在其中嵌入了一个三目运算符进行条件判断，以确定用户的性别。
总结
ES9 的 Template Literals 在前端开发中的应用非常广泛，可以大大提升字符串处理的可读性和易用性，同时也可以使代码更加简洁、灵活和方便。因此，我们在写前端代码时，可以使用 Template Literals 来更好地处理字符串。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fae00af6b2d6eab31aaaa1