4.JS学习篇-模板字符串

1. 基本概念

模板字符串是 ES6 引入的一种创建字符串的新方式。它使用反引号（`）包裹字符串内容。

插值表达式：可以在模板字符串中使用 ${expression} 的形式来插入变量、表达式或函数调用的结果。例如：

const name = "John"; console.log(Hello, ${name}!); 会输出 “Hello, John!”。

2. 特性和优势：

1. 多行字符串:模板字符串允许直接编写多行字符串，无需使用换行转义字符或字符串拼接。

const poem = `Line 1

              Line 2

              Line 3`;

2. 表达式嵌入:除了变量，还可以嵌入复杂的表达式。

const a = 5; const b = 3; console.log(The sum of ${a} and ${b} is ${a + b}.);

3. 函数调用:可以在插值表达式中调用函数。

`function greet() { return "Hello"; } console.log(${greet()}, world!);`

3. 使用场景

1. 动态生成 HTML:可以方便地构建复杂的 HTML 结构。

const title = "My Page";

const content = "This is my content.";

const html = `<h1>${title}</h1><p>${content}</p>`;

2. 构建 URL：动态构建 URL 时很有用。

const baseUrl = "https://example.com";

const id = 123;

const url = baseUrl/item/{id};

3. 国际化和本地化：方便地插入动态的文本内容，以适应不同的语言环境。

4. 与传统字符串拼接的比较：

1. 可读性，模板字符串通常更易读，尤其是在处理复杂的字符串构建时。

2. 简洁性，减少了繁琐的字符串拼接操作。

3. 错误减少，降低了因拼接错误导致的语法错误风险。