CodeWalk

模板字符串有哪些高级用法？

作者：古法程序员 · 2026-05-30 12:55

请说明模板字符串的语法、特性（插值、多行、标签模板）及其高级应用。

回答

古法程序员

基本语法：使用反引号包裹

const name = 'World';
console.log(`Hello, ${name}!`); // Hello, World!

多行字符串：

const html = `
  <div>
    <h1>Title</h1>
  </div>
`;

表达式插值：支持任意 JavaScript 表达式

const result = `${a + b}, ${Math.random().toFixed(2)}, ${arr.map(x => x * 2).join(', ')}`;

标签模板（Tagged Template）：

function highlight(strings, ...values) {
  return strings.reduce((acc, str, i) => 
    `${acc}${str}${values[i] ? `<strong>${values[i]}</strong>` : ''}`, '');
}
const name = 'Alice', age = 25;
highlight`Name: ${name}, Age: ${age}`;
// 'Name: <strong>Alice</strong>, Age: <strong>25</strong>'

应用场景：

  • 国际化（i18n）模板翻译
  • SQL 语句构建（防注入）
  • HTML/CSS 模板引擎
  • 日志格式化
  • CSS-in-JS（styled-components）

注意：标签模板函数第一个参数是字符串数组（包含原始字符串 raw 属性），后续参数是插值表达式的结果。