ES6 模板字符串与标签模板详解

ES6 模板字符串与标签模板详解

前言

ES6 标准已于 2015 年 7 月 18 日正式发布。尽管主流浏览器尚未完全支持，但这并不影响开发者提前尝试。在后端环境中，可使用 Node.js (0.12 版本及以上) 或 io.js；在前端开发中，则可通过 Babel 或 Traceur 将代码预编译为 ES5 语法以兼容旧环境。

本系列文章将不定期选取部分技术点进行深入学习，欢迎读者指正错误并留言讨论。

模板字符串基本用法

模板字符串 (template strings)

基本用法

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
not legal.`

// 字符串中嵌入变量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`  // Hello Bob, how are you today?

ES6 引入了一种新的字符串字面量语法——模板字符串。从定义上看，它是一种允许在字符串文本中嵌入表达式的字符串字面量。通俗来说，它赋予了字符串处理变量的能力。

首先回顾一下在 ES6 之前我们如何拼接字符串：

/**
 * Before ES6 字符串拼接
 */
var name = '丁香医生';
var desc = '丁香医生是面向大众的科普性健康类网站';
var html = function(name, desc){
  var tpl = '公司名：' + name + '\n'+
      '简介：'+ desc;
  return tpl;
}

而在 ES6 中，写法如下：

var html = `公司名：${name}
  简介：${desc}`;

代码更加简洁直观。

引用 MDN 对模板字符串的定义：

模板字符串使用反引号（`）来替代普通字符串中的双引号或单引号。模板字符串可以包含特定的语法占位符 ${expression}。占位符内的表达式及其周围的文本会被传递给一个默认函数，该函数负责将所有部分连接起来。

占位符 ${} 内部可以是任意合法的 JavaScript 表达式（如函数调用或运算），甚至可以是另一个模板字符串，其计算结果将作为字符串输出。若需在模板中使用 $ 或 { 等字符，需进行转义处理。

通过以下示例即可理解：

var x = 1;
var y = 2;
`${ x } + ${ y } = ${ x + y}` // "1 + 2 = 3"

与普通字符串不同，模板字符串支持多行书写。模板字符串中的空格、换行符和缩进都会在生成的字符串中原样保留。

然而，单纯的模板字符串仍存在若干局限性，例如：

1. 无法自动转义特殊字符，这可能导致注入攻击风险。
2. 难以与国际化库良好配合，即无法自动格式化特定语言的数字、日期或文本。
3. 缺乏内置的循环语法支持（甚至不支持条件语句），仅能通过模板嵌套的方式实现复杂逻辑。

标签模板机制与实战

标签模板 (tagged template)

为解决上述局限性，引入了标签模板的概念。标签模板是在反引号前添加一个标签（tag），该标签是一个函数，用于对模板字符串进行定制化处理并返回结果。以上述特殊字符转义为例：

/**
 * HTML 标签转义
 * @param {Array.<DOMString>} templateData 字符串类型的tokens
 * @param {...} ..vals 表达式占位符的运算结果tokens
 * 
 */
function SaferHTML(templateData) {
 var s = templateData[0];
 for (var i = 1; i < arguments.length; i++) {
  var arg = String(arguments[i]);
  // Escape special characters in the substitution.
  s += arg.replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;");
  // Don't escape special characters in the template.
  s += templateData[i];
 }
 return s;
}
// 调用
var html = SaferHTML`<p>这是关于字符串模板的介绍</p>`;

标签函数接收多个参数。

1. 第一个参数是包含字符串字面量（即未替换变量的部分）的数组。
2. 后续参数则是已替换后的变量值。

修改示例 1 如下：

var name = '丁香医生';
var desc = '丁香医生是面向大众的科普性健康类网站';
tag`公司名：${name}简介：${desc}`

此时 tag 函数的参数分别为 ['公司名：', '简介：'] 和 '丁香医生'、'丁香医生是面向大众的科普性健康类网站'。

通过此类方法，开发者获得了更大的控制权，例如实现国际化库支持或循环语句等功能。

浏览器兼容性支持

浏览器兼容性

1. 服务器端，io.js 提供支持。
2. 浏览器端，Firefox 34 及以上版本、Chrome 41 及以上版本支持。
3. 移动端，iOS 8 及 Android 4.4 支持。
4. IE Tech Preview 版本支持。

以上内容为本文全部，希望对各位的学习有所帮助，也欢迎大家多多支持本站。