JS字符串插值 - Javascript

在Javascript中，我们经常需要将变量或表达式的值插入到字符串中，这就是所谓的字符串插值。在ES6中，我们可以使用模板字符串来实现字符串插值。

1. 模板字符串

模板字符串是一种特殊类型的字符串，用反引号(``)包装起来。我们可以在模板字符串中任意插入变量或表达式，方法是用${}将它们括起来。

let name = 'Tom';
let age = 24;

// 使用模板字符串插值
console.log(`My name is ${name}, and I'm ${age} years old.`);
// 输出: My name is Tom, and I'm 24 years old.

2. 多行字符串

ES6的模板字符串还具有多行字符串的功能，这在以前的Javascript版本中是非常难以实现的。我们只需要在模板字符串中换行即可。

let str = `
  多行字符串
  第二行
  第三行
`;
console.log(str);
// 输出:
// 多行字符串
// 第二行
// 第三行

3. 嵌套模板字符串

有时我们需要在模板字符串中再插入一个模板字符串，此时可以使用嵌套模板字符串的方式。

let name = 'Tom';
let age = 24;

let str1 = `My name is ${name}.`;
let str2 = `I'm ${age} years old.`;

// 嵌套模板字符串
let str = `${str1} ${str2}`;
console.log(str);
// 输出: My name is Tom. I'm 24 years old.

4. 函数调用

我们可以在模板字符串中调用函数，来动态的生成字符串。

function greet(name) {
  return `Hello, ${name}!`;
}

let str = `Greeting: ${greet('Tom')}`;
console.log(str);
// 输出: Greeting: Hello, Tom!

5. 字符串转义

在模板字符串中，我们可以直接写入反引号（）和 $` 符号，但若需要在模板字符串中使用这两个字符，则需要进行转义。

let str = `A string with \`backticks\` and \${dollar}.`;
console.log(str);
// 输出: A string with `backticks` and ${dollar}.

总之，在Javascript中使用模板字符串可以大大提高代码的可读性和易维护性。我们可以更方便地插入变量或表达式，甚至可以嵌套字符串和函数调用。