Javascript 模板字符串是ECMAScript 6(ES6)中的一個新特性,它允許我們在字符串中使用變量和表達式。相比傳統(tǒng)的字符串拼接方式,它能夠提高代碼的可讀性和靈活性,下面我們將詳細介紹Javascript模板字符串的使用方法。
使用方法
在ES6之前,我們通常使用字符串拼接的方式來創(chuàng)建動態(tài)的字符串,例如:
```javascript
var name = 'John';
console.log('Hello, ' + name + '!'); // 輸出:Hello, John!
```
使用 Javascript 模板字符串,我們可以這樣寫:
```javascript
var name = 'John';
console.log(`Hello, ${name}!`); // 輸出:Hello, John!
```
通過使用反引號 `` (也稱為 backticks 或者 backquote),我們可以創(chuàng)建一個模板字符串,并在其中使用 ${} 來包含變量或表達式。
除了 ${} ,我們還可以在模板字符串中使用其他Javascript表達式,例如:
```javascript
var a = 10;
var b = 20;
console.log(`a + b = ${a + b}`); // 輸出:a + b = 30
```
模板字符串還支持多行字符串,我們不需要在每行末加上 + 或者 \ ,例如:
```javascript
var text = `
第一行
第二行
第三行
`;
console.log(text); // 輸出:
//
// 第一行
// 第二行
// 第三行
//
```
使用模板字符串可以輕松地拼接HTML字符串,而不需要手動拼接字符串和標簽。
```javascript
var data = [
{name: 'apple', price: 5},
{name: 'banana', price: 3},
{name: 'orange', price: 2},
];
var html = `
- ${data.map(item =>{
return `
- ${item.name} - $${item.price} `; }).join('')}
- //
- apple - $5
- banana - $3
- orange - $2 //
- ${(() =>{
if (flag) {
return '
- 顯示內(nèi)容 '; } else { return ''; } })()}
- 顯示內(nèi)容