JS中的模板字符串

導(dǎo)讀

今天為大家說說ES6中的新特性-模板字符串，它為JavaScript提供了簡單的字符串插值功能，從此以后，你可以通過一種更加美觀、更加方便的方式向字符串中插值了。

怎么創(chuàng)建

模板字符串是通過反引號(hào)(``)來創(chuàng)建字符串的，跟以往的單引號(hào)('')和雙引號(hào)("")的創(chuàng)建方法是一樣的。

const message = 'Hello, World!'; //單引號(hào)const message = "Hello, World"; //雙引號(hào)const message = `Hello, World!`; //反引號(hào)

還有不同于其他兩種功能的是，模板字符串中所有的空格、新行、縮進(jìn)，都會(huì)原樣輸出在生成的字符串中。這樣我們?cè)谟米址畡?chuàng)建dom模板的時(shí)候，就方便的多了。

const div = `        <div class="hello">            <p>模板字符串</p>        </div>    `;

實(shí)現(xiàn)字符串插值

模板字符串支持占位符(${expression})，可以通過占位符來實(shí)現(xiàn)插值。

原理：占位符內(nèi)的表達(dá)式在運(yùn)行時(shí)進(jìn)行計(jì)算，并將結(jié)果插入到字符串中。

其中占位符內(nèi)可以包含以下三種內(nèi)容：

1.變量

const myVal = 'abc';const message = `${myVal}`;

2.表達(dá)式

const n1 = 1;const n2 = 2;const message = `n1 + n2 = ${n1 + n2}, n1比n2大？,${n1 > n2 ? '是的' : '不是'}`;

可以有常見的加減乘除，還可以支持三元表達(dá)式等等。

3.函數(shù)體

const a1 = 1;function sum(a, b) {    return a + b;}const result = `計(jì)算兩個(gè)數(shù)的相加: ${sum(a1, 2)}`; //=> 計(jì)算兩個(gè)數(shù)的相加：3;

數(shù)據(jù)類型的隱式轉(zhuǎn)換

占位符表達(dá)式結(jié)果都會(huì)被隱式轉(zhuǎn)換為字符串輸出。

例如number類型：

const n = 3.5;const message = `The number is ${n}`;message; // => `The number is 3.5`

數(shù)組類型：

const numbers = [1, 2, 3];const message = `The numbers are ${numbers}`;message; // => 'The numbers are 1,2,3'

如果占位符包含一個(gè)對(duì)象，按照轉(zhuǎn)換為字符串的規(guī)則，該對(duì)象也被轉(zhuǎn)換為字符串。在JS中所有對(duì)象都具有toString()方法，所以在模板字符串中的對(duì)象會(huì)調(diào)用對(duì)象的方法toString()來獲取對(duì)象的字符串表示。

也就是數(shù)組轉(zhuǎn)換字符串的時(shí)候，會(huì)執(zhí)行array.toString()的方法。

轉(zhuǎn)義占位符

因?yàn)檎嘉环袷?/span>${expression}在模板文字中具有特殊含義，如果想單獨(dú)使用$,${這些需要對(duì)它進(jìn)行轉(zhuǎn)義。例如，沒有進(jìn)行轉(zhuǎn)義的聲明，則會(huì)報(bào)錯(cuò)。

const message = `Some weird characters: ${abc}`;// Throws "ReferenceError: abc is not defined"

如果想把‘${abc}‘當(dāng)做字符串輸出，可以使用轉(zhuǎn)義符(反斜杠\)。

const message = `Some weird characters: \${abc}`;message; // => 'Some weird characters follow: ${abc}'

也就是說如果你需要在模板字符串中引入字符$和{。無論你要實(shí)現(xiàn)什么樣的目標(biāo)，你都需要用反斜杠轉(zhuǎn)義每一個(gè)字符：`\$`和`\{`。

const message = `Some weird characters: \${abc} \${abc \${`;message;?//?=>?'Some?weird?characters:?${abc}?${abc?${'

好了，今天內(nèi)容就先講到這里。

最后想說的是，字符串插值是一個(gè)很棒的功能，因?yàn)樗兄谝院啙嵰鬃x的方式將值插入字符串文字中。并避免笨拙的字符串連接方法。

我們的正常，就在于自己了解自己的不正常。

--《追風(fēng)箏的人》