JS中的模板字符串

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

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

const message = 'Hello, World!'; //單引號
const message = "Hello, World"; //雙引號
const message = `Hello, World!`; //反引號

還有不同於其他兩種功能的是，模板字符串中所有的空格、新行、縮進，都會原樣輸出在生成的字符串中。這樣我們在用字符串創建dom模板的時候，就方便的多了。

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

 

 功能：模板字符串支持占位符(${expression})。占位符內的表達式在運行時進行計算，並將結果插入到字符串中。

其中占位符內的表達式可以包含以下三種內容：

1.變量

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

上面的JS被執行過程中，占位符${myVal}被替換成myVal里面的值，所以后面的message輸出的內容也就是abc了。

2.表達式

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

3.函數

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

下面來說說它內置的一些功能。

一、數據類型的隱式轉換

占位符表達式結果都會被隱式轉換為字符串輸出。

例如number類型：

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

數組類型：

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

如果占位符包含一個對象，按照轉換為字符串的規則，該對象也被轉換為字符串。調用對象的方法toString()來獲取對象的字符串表示。

數組轉換的原理是：數組方法join(',')在數組轉換為字符串時執行。因此字符串插值結果為'The numbers are 1,2,3'。

二、轉義占位符

因為占位符格式${expression}在模板文字中具有特殊含義，所以不能在`${someCharacters}`不轉義的情況下使用字符序列。

也就是里面引用的內容必須是已經聲明了的。

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

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

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

也就是說如果你需要在模板字符串中引入字符$和{。無論你要實現什么樣的目標，你都需要用反斜杠轉義每一個字符：`\$`和`\{`。

const message = `Some weird characters: \${abc} \${abc \${`;

message; // => 'Some weird characters: ${abc} ${abc ${'

最后想說的是，字符串插值是一個很棒的功能，因為它有助於以簡潔易讀的方式將值插入字符串文字中。並避免笨拙的字符串連接方法。