字符串模板引擎
什么是模板字符串同廉？
ES5中的字符串缺乏多行字符串汽久、字符串格式化、HTML轉(zhuǎn)義等特性挂脑。
而ES6通過模板字面量的方式進行了填補藕漱，模板字面量試著跳出JS已有的字符串體系，通過一些全新的方法來解決問題最域。
1. 基本用法
ES5字符串寫法：
let message = "我的寵物狗叫拆家哈士奇谴分，今年3歲了"
console.log(message);
//輸出結(jié)果：我的寵物狗叫拆家哈士奇，今年3歲了
將其轉(zhuǎn)化成ES6寫法镀脂，其實非常簡單：
只需把最外圍的雙引號（"）或者單引號（'） 轉(zhuǎn)化成反引號（`）即可牺蹄。
let message = `我的寵物狗叫拆家哈士奇，今年3歲了`
console.log(message);
//輸出結(jié)果：我的寵物狗叫拆家哈士奇薄翅，今年3歲了
如果想在字符串內(nèi)部使用反引號沙兰，只需使用反斜杠（ ）轉(zhuǎn)義即可
let message = `我的寵物狗叫\(zhòng)`拆家哈士奇\`，今年3歲了`;
console.log(message); // "我的寵物狗叫`拆家哈士奇`翘魄，今年3歲了"
2. 多行字符串
傳統(tǒng)的JavaScript語言鼎天，輸出模板通常是這樣寫的：
var name = '拆家哈士奇';
var age = 3;
$('#result').append(
'我的寵物狗叫 <b>' + name + '</b>\n' +
'今年\n' +
'<em>' + age+ '</em>歲，\n'+
'十分可愛!'
);
但是在ES6中暑竟，要獲得同樣效果的多行字符串斋射，只需使用如下代碼：
let name = '拆家哈士奇';
let age = 3;
$('#result').append(
`我的寵物狗叫 <b>${name}</b>
今年
<em>${age}</em>歲，
十分可愛!`
);
對比兩段拼接的代碼但荤，模板字符串使得我們不再需要反復使用雙引號（或者單引號）了罗岖；而是改用反引號標識符（`），插入變量的時候也不需要再使用加號（+）了腹躁，而是把變量放入${ }即可桑包。
也不用再通過寫 \n 進行換行了，ES6 的模板字面量使多行字符串更易創(chuàng)建纺非，因為它不需要特殊的語法哑了，只需在想要的位置直接換行即可，此處的換行會同步出現(xiàn)在結(jié)果中烧颖。簡單弱左、清晰、明了炕淮。
注意：如果使用模板字符串表示多行字符串科贬，所有的空格和縮進都會被保留在輸出之中。因此需要特別留意縮進。
console.log(`我的寵物狗叫拆家哈士奇
今年3歲了`);
結(jié)果：
//我的寵物狗叫拆家哈士奇
// 今年3歲了
以上代碼中榜掌，模板字面量第二行前面的所有空白符都被視為字符串自身的一部分。
如果一定要通過適當?shù)目s進來對齊文本乘综，可以考慮在多行模板字面量的第一行空置并在后面的幾行縮進
let html = `
<div>
<h1>Title</h1>
</div>`.trim();
以上代碼中憎账，模板字面量的第一行沒有任何文本，第二行才有內(nèi)容卡辰。 HTML標簽的縮進增強了可讀性胞皱，之后再調(diào)用trim()方法移除了起始的空行。
3. 字符串中嵌入變量
模板字面量看上去僅僅是普通JS字符串的升級版九妈，但二者之間真正的區(qū)別在于模板字面量的變量占位符反砌。
ES5寫法：
const age = 3;
const message = '我的寵物狗叫拆家哈士奇，今年' + age*2 + '歲了' ;
//我的寵物狗叫黑子萌朱，今年6歲了
ES6寫法：
const age = 3;
const message = `我的寵物狗叫拆家哈士奇宴树，今年 ${age*2} 歲了` ;
//我的寵物狗叫拆家哈士奇，今年6歲了
變量占位符允許將任何有效的JS表達式嵌入到模板字面量中晶疼，并將其結(jié)果輸出為字符串的一部分酒贬。
如上面的例子，占位符 ${age} 會訪問變量 age翠霍，并將其值插入到 message 字符串中锭吨。
既然占位符是JS表達式，還可以輕易嵌入運算符寒匙、函數(shù)調(diào)用等零如。
const age = 2;
const message = `我的寵物狗叫拆家哈士奇，今年 ${(age*2).toFixed(2)} 歲了`;
//"我的寵物狗叫黑子锄弱，今年 4.00 歲了"
function fn() {
return "小黃";
}
`我朋友家的寵物叫${fn()}`
//"我朋友家的寵物叫小黃"
4. 帶標簽的模板字符串
要用 ES6 模板實現(xiàn)復雜一點的字符串處理邏輯考蕾，要依賴寫函數(shù)來實現(xiàn)。
幸運的是棵癣，除了在模板的插值表達式里想辦法調(diào)用各種字符串轉(zhuǎn)換的函數(shù)之外辕翰，ES6 還提供了更加優(yōu)雅且更
容易復用的方案——帶標簽的模板字面量（tagged template literals，以下簡稱標簽?zāi)０澹?br>
標簽?zāi)０宓恼Z法很簡單狈谊，就是在模板字符串的起始反撇號前加上一個標簽喜命。
let message = tag`拆家哈士奇`;
在上面的代碼中，tag就是模板標簽河劝。tag其實是一個函數(shù)壁榕，這個函數(shù)會被調(diào)用來處理這個模板字符串。
4.1 定義標簽
let name = '拆家哈士奇',
age = 2,
message = tag`我的寵物狗叫${name}赎瞎，今年${age}歲了`;
function tag(stringArr, value1, value2) {
console.log(stringArr); //["我的寵物狗叫", "牌里，今年", "歲了", raw: Array(3)]
//該數(shù)組有一個raw屬性，保存的是轉(zhuǎn)義后的原字符串
console.log(value1); // 拆家哈士奇
console.log(value2); // 2
return;
}
標簽函數(shù)通常使用不定參數(shù)特性來定義占位符，從而簡化數(shù)據(jù)處理的過程
function tag(stringArr, ...values) {
console.log(values); // ["拆家哈士奇", 2]
}
4.2 實際應(yīng)用
“標簽?zāi)０濉钡囊粋€重要應(yīng)用牡辽，就是過濾HTML字符串喳篇，防止用戶輸入惡意內(nèi)容
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]);
// 轉(zhuǎn)義占位符中的特殊字符。
s += arg.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">");
// 不轉(zhuǎn)義模板中的特殊字符态辛。
s += templateData[i];
}
return s;
}
上面代碼中麸澜，sender變量往往是用戶提供的，經(jīng)過filterHTML函數(shù)處理奏黑，里面的特殊字符都會被轉(zhuǎn)義炊邦。
var sender = '<script>alert("買了個包")</script>'; // 惡意代碼
var message = filterHTML`<p>${sender} 你好啊</p>`;
console.log(message);
// <p><script>alert("買了個包")</script> 你好啊</p>
即使一個惡意命名的用戶，例如黑客向其他用戶發(fā)送一條騷擾信息熟史，無論如何這條信息都會被轉(zhuǎn)義為普通字符串馁害，
其他用戶不會受到潛在攻擊的威脅戏售。
標簽?zāi)０宓牧硪粋€應(yīng)用懊直，就是多語言轉(zhuǎn)換（國際化處理）
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)
}
