模板字符串是ES6引入的一種新型字符串表示法，使用反引號(hào)( ` ) 包裹內(nèi)容，相比傳統(tǒng)字符串具有更強(qiáng)大的功能。

1.核心特性

• 多行字符串：直接支持換行。
• 字符串插值：使用 ${ 對(duì)象 } 嵌入變量和表達(dá)式。
• 標(biāo)簽?zāi)０?/strong>：可以自定義字符串處理函數(shù)。

1.1 基本語(yǔ)法

// 傳統(tǒng)字符串
const name = 'Alice';
const greeting = 'Hello, ' + name + '!';

// 模板字符串
const greeting = `Hello, ${name}!`;

1.2 多行字符串處理

// ES5實(shí)現(xiàn)多行字符串
var message = '第一行\(zhòng)n' +
              '第二行\(zhòng)n' +
              '第三行';

//ES6新特性 可以直接換行
const message = `第一行
第二行
第三行`;

1.3 字符串插值

//基本插值
const name = 'Alice';
const age = 25;
console.log(`Name: ${name}, Age: ${age}`); // "Name: Alice, Age: 25"

//表達(dá)式計(jì)算
const a = 10;
const b = 20;
console.log(`Sum: ${a + b}`); // "Sum: 30"

//函數(shù)調(diào)用
function getAge() {
  return 25;
}
console.log(`Age: ${getAge()}`); // "Age: 25"

//嵌套模板
const isMember = true;
console.log(`Status: ${
  isMember ? `Member since ${2020}` : 'Not a member'
}`); // "Status: Member since 2020"

1.4 標(biāo)簽?zāi)０?Tagged Templates)

標(biāo)簽?zāi)０逶试S使用函數(shù)解析模板字符串，第一個(gè)參數(shù)是字符串?dāng)?shù)組，后續(xù)參數(shù)是插值表達(dá)式。

function tag(strings, ...values) {
  console.log(strings); // ["Hello ", "!"]
  console.log(values); // ["Alice"]
  return 'Processed string';
}

const name = 'Alice';
const result = tag`Hello ${name}!`;
// 當(dāng)調(diào)用 tag 函數(shù)時(shí)：
// strings 參數(shù)接收模板字符串中的文本部分。
// values 參數(shù)接收模板字符串中的嵌入值。

1.5 特殊字符處理

//轉(zhuǎn)義字符
console.log(`反引號(hào): \` 美元符號(hào): \${`); // "反引號(hào): ` 美元符號(hào): ${"

//原始字符串 使用String.raw 標(biāo)簽獲取原始字符串（不處理轉(zhuǎn)義字符）
const path = String.raw`C:\Development\project\files`;
console.log(path); // "C:\Development\project\files"

// 等同于
function raw(strings, ...values) {
  let result = strings.raw[0];
  for (let i = 0; i < values.length; i++) {
    result += values[i] + strings.raw[i + 1];
  }
  return result;
}

1.6 性能考慮

• 靜態(tài)字符串：對(duì)于純靜態(tài)字符串，模板字符串與普通字符串性能相當(dāng)
• 動(dòng)態(tài)插值：頻繁變化的插值內(nèi)容可能影響性能，在極端性能敏感場(chǎng)景需測(cè)試
• 標(biāo)簽?zāi)０?/strong>：自定義處理會(huì)增加開(kāi)銷(xiāo)，但通常可忽略不計(jì)

1.7 相關(guān)實(shí)踐

• 優(yōu)先使用模板字符串：替代所有字符串拼接場(chǎng)景
• 復(fù)雜邏輯處理：對(duì)于復(fù)雜插值邏輯，考慮提前計(jì)算表達(dá)式

// 不推薦
console.log(`Result: ${calculateA() + calculateB() * complexCalculation()}`);

// 推薦
const result = calculateA() + calculateB() * complexCalculation();
console.log(`Result: ${result}`);

• 多行縮進(jìn)處理：使用.trim()消除不必要的縮進(jìn)

function getHtml() {
  return `
    <div>
      <p>Content</p>
    </div>
  `.trim();
}