调整字号

ES6 快速上手:模板字符串

es6-small

ES6 引入了一种新型的字符串字面量语法,称为模板字符串(template strings)。使用反撇号(`)来代替普通字符串的引号。下面是一个例子:

let greeting = `Hello Jackie`!

有什么用呢?模板字符串为 JavaScript 提供了简单的插值功能(string interpolation)。例:

let name = "Jackie";
let greeting = `Hello ${name}`!

${name} 称为占位符(placeholder)。模板占位符可以是任意 JavaScript 表达式,比如函数调用、算数运算等,都可以作为占位符使用,甚至可以嵌套另一个模板字符串。

如果占位符计算出的值不是字符串,那么会调用 toString 方法。

如果要书写反撇号(`),或者 $,或者 {,都需要转义(加反斜杠)。

与普通字符串的一大区别是,模板字符串可以多行书写:

$("#warning").html(`
  <h1>你好!</h1>
  <p>我叫${name}。这是一个多行
  模板字符串的
  示例。</p>
`);

所有的空格、新行、缩进,都会原样输出在生成的字符串中。

但是,模板字符串并不会自动转义 HTML 字符(比如 < > 等),而且,不支持条件语句、遍历,比其他的模板库还是弱了些。为了突破这些限制,ES6 提供了标签模板(tagged templates)。只需要在起始的反撇号前加上一个额外的标签,如下面的 htmlspecial

var message = htmlspecial`<p>${htmlStr}</p>`;

上面的代码等效于

var message = htmlspecial(templateData, htmlStr);

templateData 是一个不可变数组,存储着模板所有的字符串部分,也就是除去占位符以后剩下的部分,比如上例中 ${htmlStr} 将模板分割为两部分,所以 templateData 数组内就是两个元素,形如 ["<p>", "</p>"]。同时这个数组是不能更改的,相当于用了 Object.freeze

htmlspecial 的一种实现(用来将 < > 等特殊字符转义为实体引用):

function htmlspecial(templateData) {
  var s = templateData[0];
  for (var i = 1; i < arguments.length; i++) {
    var arg = String(arguments[i]);

    // 转义HTML特殊字符。
    s += arg.replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;");

    // 拼接
    s += templateData[i];
  }
  return s;
}

函数返回的值就会当作模板字符串的输出。

还没有评论,沙发空缺中……
flight