ES6字符串模板引擎4

字符串模板引擎

ES5 中的字符串缺乏多行字符串、字符串格式化、HTML 转义等特性。

而 ES6 通过模板字面量的方式进行了填补，模板字面量试着跳出 JS 已有的字符串体系，通过一些全新的方法来

解决问题。

1. 基本用法

ES5 字符串写法：

let message = "我的宠物狗叫黑子，今年 16 岁了"

将其转化成 ES6 写法，其实非常简单：

只需把最外围的双引号（”）或者单引号（’）转化成反引号（`）即可。

let message = ` 我的宠物狗叫黑子，今年 16 岁了 `

如果想在字符串内部使用反引号，只需使用反斜杠（）转义即可

let message = ` 我的宠物狗叫 \` 黑子 \`，今年 16 岁了 `;
console.log(message); // "我的宠物狗叫 ` 黑子 `，今年 16 岁了"

2. 多行字符串

传统的 JavaScript 语言，输出模板通常是这样写的：

var name = '黑子';
var age = 8;
$('#result').append(
  '我的宠物狗叫 <b>' + name + '</b>\n' +
      '今年 \n' +
      '<em>' + age+ '</em> 岁，\n'+
  '十分可爱!'
);

但是在 ES6 中，要获得同样效果的多行字符串，只需使用如下代码：

let name = '黑子';
let age = 8;
$('#result').append(` 我的宠物狗叫 <b>${name}</b>
      今年 
      <em>${age}</em> 岁，十分可爱!`
);

对比两段拼接的代码，模板字符串使得我们不再需要反复使用双引号（或者单引号）了；而是改用反引号标识符

（`），插入变量的时候也不需要再使用加号（+）了，而是把变量放入 ${} 即可。

也不用再通过写 n 进行换行了，ES6 的模板字面量使多行字符串更易创建，因为它不需要特殊的语法，只需在想

要的位置直接换行即可，此处的换行会同步出现在结果中。简单、清晰、明了。

注意：如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。因此需要特别留意缩进。

console.log(` 我的宠物狗叫黑子
                             今年 16 岁了 `);
结果：// 我的宠物狗叫黑子
//                             今年 16 岁了

以上代码中，模板字面量第二行前面的所有空白符都被视为字符串自身的一部分。

如果一定要通过适当的缩进来对齐文本，可以考虑在多行模板字面量的第一行空置并在后面的几行缩进

let html = `
<div>
    <h1>Title</h1>
</div>`.trim();

以上代码中，模板字面量的第一行没有任何文本，第二行才有内容。HTML 标签的缩进增强了可读性，之后再

调用 trim() 方法移除了起始的空行。

3. 字符串中嵌入变量

 模板字面量看上去仅仅是普通 JS 字符串的升级版，但二者之间真正的区别在于模板字面量的变量占位符。

ES5 写法：

const age = 8;
const message  = '我的宠物狗叫黑子，今年' + age*2 + '岁了' ;
// 我的宠物狗叫黑子，今年 16 岁了

ES6 写法：

const age = 8;
const message  = ` 我的宠物狗叫黑子，今年 ${age*2} 岁了 ` ;
// 我的宠物狗叫黑子，今年 16 岁了

变量占位符允许将任何有效的 JS 表达式嵌入到模板字面量中，并将其结果输出为字符串的一部分。

如上面的例子，占位符 ${age} 会访问变量 age，并将其值插入到 message 字符串中。

既然占位符是 JS 表达式，还可以轻易嵌入运算符、函数调用等。

const age = 8;
const message = ` 我的宠物狗叫黑子，今年 ${(age*2).toFixed(2)} 岁了 `;
//"我的宠物狗叫黑子，今年 16.00 岁了"

function fn() {return "小黄";}
` 我朋友家的宠物叫 ${fn()}`
//"我朋友家的宠物叫小黄"

4. 带标签的模板字符串

要用 ES6 模板实现复杂一点的字符串处理逻辑，要依赖写函数来实现。

 幸运的是，除了在模板的插值表达式里想办法调用各种字符串转换的函数之外，ES6 还提供了更加优雅且更

容易复用的方案——带标签的模板字面量（tagged template literals，以下简称标签模板）

 标签模板的语法很简单，就是在模板字符串的起始反撇号前加上一个标签。let message = tag` 黑子 `;

在上面的代码中，tag 就是模板标签。tag 其实是一个函数，这个函数会被调用来处理这个模板字符串。

4.1 定义标签

let  name = '黑子',
     age = 8,
     message = tag` 我的宠物狗叫 ${name}，今年 ${age} 岁了 `;

function tag(stringArr, value1, value2) {console.log(stringArr);  //["我的宠物狗叫", "，今年", "岁了", raw: Array(3)]
                             // 该数组有一个 raw 属性，保存的是转义后的原字符串
    console.log(value1);     // 黑子
    console.log(value2);     // 8
    return;
}

标签函数通常使用不定参数特性来定义占位符，从而简化数据处理的过程

function tag(stringArr, ...values) {console.log(values); //  ["黑子", 8]
}

4.2 实际应用

“标签模板”的一个重要应用，就是过滤 HTML 字符串，防止用户输入恶意内容

var message =  filterHTML`<p>${sender} 你好啊 </p>`;
function filterHTML(templateData) {var s = templateData[0];
  for (var i = 1; i < arguments.length; i++) {var arg = String(arguments[i]);
    // 转义占位符中的特殊字符。s += arg.replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;");
    // 不转义模板中的特殊字符。s += templateData[i];
  }
  return s;
}

上面代码中，sender 变量往往是用户提供的，经过 filterHTML 函数处理，里面的特殊字符都会被转义。

var sender = '<script>alert(" 买了个包 ")</script>'; // 恶意代码
var message = filterHTML`<p>${sender} 你好啊 </p>`;

console.log(message);
// <p>&lt;script&gt;alert("买了个包")&lt;/script&gt;  你好啊 </p>

即使一个恶意命名的用户，例如黑客向其他用户发送一条骚扰信息，无论如何这条信息都会被转义为普通字符串，

其他用户不会受到潜在攻击的威胁。

标签模板的另一个应用，就是多语言转换（国际化处理）

let name = 'ES6 专栏';  let  number = 666;  
let chinese = ['欢迎访问','您是第','位访问者'];

i18n`Welcome to ${name}, you are the ${number}  visitor`;  

function i18n(stringArr, ...values){
    let str='';  
    stringArr.map((item,index)=>{str += (chinese[index] +  (values[index] ? values[index] : '' ))   
    });
    console.log(str) 
}
// 欢迎订阅 ES6 专栏 您是第 666 位访问者

5. 新增的字符串方法

5.1 查找字符串

在以前在字符串中查找字符串的时候，都是使用 indexOf 方法。

ES6 新增了三个方法来查找字符串 :

includes 方法会在给定文本存在于字符串中的任意位置时返回 true，否则返回 false。

startsWith 方法会在给定文本出现在字符串开头时返回 true，否则返回 false。

endsWith 方法会在给定文本出现在字符串末尾时返回 true，否则返回 false。

var msg = "Hello world!";

console.log(msg.startsWith("Hello"));       // true
console.log(msg.endsWith("!"));             // true
console.log(msg.includes("d"));             // true

console.log(msg.startsWith("d"));           // false
console.log(msg.endsWith("world!"));        // true
console.log(msg.includes("x"));             // false

每个方法都接收两个参数：需要搜索的文本和可选的起始索引值。

若第二个参数未提供，includes 和 startsWith 会从字符串的起始中开始检索，endsWith 则是从字符串的末尾。

实际上，第二个参数减少了需要检索的字符串的总量。

当提供第二个参数后，includes 和 startsWith 会以该索引为起始点进行匹配

console.log(msg.includes("d", 8));          // true
console.log(msg.includes("d", 11));         // false
console.log(msg.startsWith("d", 10));       // true
console.log(msg.startsWith("d", 9));        // false

endsWith 将字符串的长度与参数值相减并将得到的值作为检索的起始点

console.log(msg.endsWith("d", 11));         // true (长度 13 - 参数值 11 = 起始点 2)
console.log(msg.endsWith("d", 8));          // false (长度 13 - 参数值 8 = 起始点 5)

应用场景：

（1）利用 includes 检查用户使用的浏览器

if (navigator.userAgent.includes('Chrome')) {console.log("是谷歌浏览器");
} else {console.log("不是谷歌浏览器");
}

（2）利用 startsWith 检查路径

let urlstr = "http://www.baidu.com";
let urlstr1 = "file:///C:/Users/xxx.html";
console.log(urlstr.startsWith("https://"));    //false
console.log(urlstr1.startsWith("file://"))     //true

（3）利用 startsWith 检查文件格式

let path = "111.jpg";
console.log(path.endsWith(".png"));   //false

5.2 字符串重复 — repeat 方法

接受一个数字参数作为字符串的重复次数。该方法返回一个重复包含初始字符串的新字符串，重复次数等于参数。

例如：

console.log("abc".repeat(4));       // "abcabcabcabc"
let str = "小样儿";
console.log(str.repeat(10));     // 小样儿小样儿小样儿小样儿小样儿小样儿小样儿小样儿小样儿小样儿

5.3 填充字符串

string.padStart 往字符串前面填充（在字符串前面插入字符串）

string.padEnd 往字符串后面填充（在字符串后面插入字符串）

let str = "Iphone";
let leftStr = "我的";
console.log(str.padStart(str.length + leftStr.length, leftStr));// 我的 Iphone

let iphone = "Iphone";    
let rightStr = "10";    
console.log(iphone.padEnd(iphone.length + rightStr.length, rightStr));    //Iphone10

6. 总结

ES6 给字符串带来了很多实用性的扩展：

模板字符串、标签模板、repeat 函数、includes 函数、startsWith 函数、endsWith 函数、padStart 函数、padEnd

函数。

字符串模版的出现让我们再也不用拼接变量了，而且支持在模板里有简单计算操作。

希望大家能动手练习一下，并把这些新特性应用到工作中，很快就掌握了，用起来能让大家的工作更轻松，愉悦。