模板字符串是在ES6中興起,個人感覺非常有用:用反引號(`)標識,它可以當作普通字符串使用,也可以用來定義多行字符串,或者在字符串中嵌入變量。
請看下方截圖代碼從而可知其模板字符串的強大:
以下爲轉載內容,請供參考
用法
// 普通字符串
`In JavaScript '\n' is a line-feed.`
// 多行字符串
`In JavaScript this is
not legal.`
// 字符串中嵌入變量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?` // Hello Bob, how are you today?
上面代碼中,模板字符串都是用反引號表示,如果在模板字符串中需要使用反引號,則前面需要用反斜槓轉義。
var greeting = `\`Yo\` World!`; // `Yo` World!
如果使用模板字符串表示多行字符串,則所有的空格、縮進和換行都會被保留在輸出中。
$('#list').html(`
<ul>
<li>first</li>
<li>second</li>
</ul>
`);
上面代碼中,所有模板字符串的空格和換行都是被保留的,比如<ul>
標籤前面會有一個換行。如果想把行首和行尾的換行、空格等去掉,則使用trim方法即可。
$('#list').html(`
<ul>
<li>first</li>
<li>second</li>
</ul>
`.trim());
模板字符串中嵌入變量,要將變量名寫在${}
之中。大括號內可以放入任意的JavaScript表達式,可以進行運算,以及引入對象屬性。
var x = 1, y = 2;
`${x} + ${y} = ${x + y}`;
// "1 + 2 = 3"
`${x} + ${y * 2} = ${x + y * 2}`;
// "1 + 4 = 5"
var obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"
模板字符串之中還可以調用函數。
function func() {
return 'Hello';
}
`${func()} World`;
// "Hello World"
如果大括號中的值不是字符串,則將按照一般的規則轉換爲字符串。如,若大括號中是一個對象,則將默認調用對象的toString方法,把對象轉換爲字符串。
如果模板字符串中的變量沒有聲明,則會報錯。
// 變量place沒有聲明
var msg = `Hello, ${place}`;
// ReferenceError: place is not defined
模板字符串之間還可以進行嵌套。
var tmpl = addrs => `
<table>
${addrs.map(addr => `
<tr><td>${addr.first}</td></tr>
<tr><td>${addr.last}</td></tr>
`).join('')}
</table>
`;
tmpl([{first:'a', last: 'b'}]);
// output:
/*"
<table>
<tr><td>a</td></tr>
<tr><td>b</td></tr>
</table>
"*/
如果需要引用模板字符串本身,在需要時執行,可以像下面這樣寫。
// 寫法一
var str = 'return ' + '`Hello ${name}!`';
var func = new Function('name', str);
func('Amy'); // "Hello Amy!"
// 寫法二
var str = '(name) => `Hello ${name}!`';
var func = eval.call(null, str);
func('Amy'); // "Hello Amy!"
標籤模板
模板字符串的功能,不僅是上面那些,它還可以緊跟在一個函數後面,該函數將被調用來處理這個模板字符串,這種稱爲“標籤模板”功能(Tagged template)。
標籤模板函數第一個參數是字符串模板的常量數組,後面的每一個參數爲表達式的計算結果,函數名稱可以任意指定。下面是一個例子:
var a = 5, b = 10;
function tag(strings, ...values) {
console.log(strings[0]); // "Hello "
console.log(strings[1]); // " world"
console.log(strings[2]); // ""
console.log(values[0]); // 15
console.log(values[1]); // 50
return "Anything";
}
tag`Hello ${a + b} world ${a * b}`;
// Anything
alert`123`
// 等同於
alert(123)
標籤模板其它是一種特殊的函數調用形式,“標籤”指的就是函數,緊跟在後面的模板字符串就是它的參數。
var a = 1,
b = 2;
tag`Helo ${a + b} world ${a * b}`;
上面代碼中,模板字符串前面有一個標識名tag,它是一個函數。整個表達式的返回值就是tag函數處理模板字符串後的返回值。
函數tag依次會接收到多個參數。
tag函數的第一個參數是一個數組,該數組的成員是模板字符串中那些沒有變量替換的部分,也就是說,變量替換隻發生在數組的第一個成員與第二個成員之間、第二個成員與第三個成員之間,以此類推。
tag函數的其他參數,都是模板字符串各個變量被替換的值。本例中,模板字符串含有兩個變量,因此tag會接收到value1和value2兩個參數。
tag函數所有參數的實際值如下:
- 第一個參數: [‘Hello ‘, ’ world’, ”]
- 第二個參數: 3
- 第三個參數: 2
也就是說,tag函數實際上是用下面的形式調用:
tag(['Hello ',' world', ''], 3, 2);
String對象的raw方法
String.raw方法用來充當模板字符串的處理函數,返回一個除表達式和變量會被替換,其它都保持原樣的字符串。
String.raw`Hi\n${2+3}!`;
// "Hi\n5!"
String.raw`Hi\u000A!`;
// "Hi\u000A!"
String.rwa`Hi\\n`;
// "Hi\\n"
String.raw方法可以作爲處理模板字符串的基本方法,它會將所有變量替換,而且對斜槓進行轉義,方便下一步作爲字符串來使用。