JS模板字符串|极客笔记

JS模板字符串

在JavaScript中，模板字符串是一种特殊的字符串，它允许你在字符串中嵌入表达式。模板字符串使用反引号 () 来定义，而不是常规字符串中使用的单引号或双引号。在模板字符串中，你可以使用${}` 来嵌入变量或表达式。

基本语法

模板字符串的基本语法如下所示：

const name = 'Alice';
const age = 30;

const message = `Hello, my name is  ${name} and I am$ {age} years old.`;

console.log(message);

在上面的示例中，我们定义了两个变量 name 和 age，然后使用模板字符串创建了一个包含这些变量的字符串。

多行字符串

另一个模板字符串的优点是可以跨多行。在传统的字符串中，如果想要跨多行输出文本，你需要使用 \n 或者 + 连接多个字符串。但是在模板字符串中，你可以直接在反引号 (`) 中编写多行文本。

const multiline = `
This is a 
multiline
string
`;

console.log(multiline);

嵌套模板字符串

模板字符串之间也可以嵌套使用，例如：

const name = 'Bob';
const age = 25;

const message = `Hello, my name is  ${name} and I am$ {age} years old.`;

const fullMessage = `
Greetings!

${message}

Have a nice day!
`;

console.log(fullMessage);

在这个示例中，我们将之前定义的 message 字符串嵌入到了另一个模板字符串中。

嵌入表达式

除了变量之外，你还可以在模板字符串中嵌入任意表达式，例如：

const a = 10;
const b = 20;

const sum = `The sum of  ${a} and$ {b} is ${a + b}`;

console.log(sum);

原始字符串

有时候你可能希望在模板字符串中保留原始格式，不进行任何转义处理。这时可以使用原始字符串，即在 ${} 中使用函数 String.raw()。

const rawString = String.raw`Hello\nworld`;

console.log(rawString);

在上面的示例中，Hello\nworld 会保持原始的 \n，而不会被转义为换行符。

标签模板字符串

除了普通的模板字符串外，还有一种特殊的模板字符串叫做标签模板字符串。标签模板字符串是一种高级的用法，你可以自定义标签函数处理模板字符串。标签函数是一个接收模板字符串和相应表达式的函数。

function myTagFunction(strings, ...values) {
    console.log(strings);  // 输出字符串数组
    console.log(values);   // 输出表达式结果数组
}

const a = 10;
const b = 20;

myTagFunction`The sum of  ${a} and$ {b} is ${a + b}`;

在上面的示例中，myTagFunction 是一个自定义标签函数，它会接收到模板字符串和对应表达式的结果。你可以在标签函数中对字符串和表达式进行任何处理。