在前端开发中，我们经常需要拼接字符串，比如拼接 HTML 模板、拼接 URL 参数等等。在过去，我们通常使用字符串拼接的方式来完成这些任务，但是这样会让代码变得难以阅读和维护。ES9 的模板字面量（Template Literals）提供了一种更加简洁、优雅的方式来拼接字符串，让代码更加干净。
模板字面量的语法
模板字面量使用反引号（`）括起来，里面可以包含普通字符串和表达式，表达式需要使用 ${} 包裹。例如：
----- ---- - -------- ----- --- - --- ----- ------- - ------- -- ---- -- -------- --- ------ ----- ------ ---------------------
输出结果为：
------ -- ---- -- ------ --- -- ----- ----
模板字面量的优点
使用模板字面量有以下几个优点：
更加简洁
使用模板字面量可以将字符串和表达式放在一起，不需要使用 + 号拼接字符串。这样可以使代码更加简洁。
-- --------- ----- --- - -------------------------- - ---- - -------- - ---- - --------- - ------ -- --------- ----- --- - --------------------------------------------------------------
更加易读
使用模板字面量可以让代码更加易读。使用 ${} 包裹表达式可以让代码更加直观，避免了过多的字符串拼接和转义。
-- --------- ----- ------- - ------- -- ---- -- - - ---- - -- ---- - - --- - - ----- ------ -- --------- ----- ------- - ------- -- ---- -- -------- --- ------ ----- ------
更加安全
使用模板字面量可以避免 XSS 攻击。模板字面量会自动转义输出的字符串，避免了恶意代码注入。
----- ---- - -------------------------------- ----- ------- - ------- -- ---- -- ---------- --------------------- -- ----- ------ -- ---- -- ------------------------------------------
模板字面量的应用
模板字面量不仅可以用于字符串拼接，还可以用于多行字符串和标签模板。
多行字符串
使用模板字面量可以方便地创建多行字符串，不需要使用 \n 换行符。
----- ---- - -
---- ------------------
--------------
--------------
------
--标签模板
标签模板是一种特殊的模板字面量，可以在模板字面量前面加上一个函数名，这个函数将会被调用来处理模板字面量。标签模板可以用于实现自定义的字符串处理逻辑，比如国际化、HTML 模板、CSS-in-JS 等。
-------- ------------- ---------- -
----- -------- - -
--- -
------ --------
------ --------
--
--- -
------ -----
------ -----
--
--
----- ---- - -------------------
----- ------- - ----------------------- ------- -- -- -
----- ----- - --------- -- ---
------ ------ - ------ - ----------------------
-- ----
------ --------
-
----- ------- - ------------------ -------------
--------------------- -- ---------------- ------- ----------------------- ---- ----总结
使用 ES9 的模板字面量可以让代码更加干净、简洁、易读和安全。模板字面量不仅可以用于字符串拼接，还可以用于多行字符串和标签模板。我们应该在开发中尽可能地使用模板字面量，让代码更加优雅。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/663e52ecd3423812e4c879ef