17370845950

JavaScript原生提供模板字符串（反引号包裹，支持${expression}插值），可嵌入变量、表达式、函数调用、多行文本及HTML片段，并可通过标签函数实现转义等高级功能。

JavaScript 本身没有内置的“模板引擎”，但提供了原生支持——模板字符串（Template Literals），它用反引号 ` 包裹，支持嵌入表达式和多行文本，是轻量级、开箱即用的模板方案。

模板字符串的基本写法

用反引号定义字符串，内部用 ${expression} 插入变量或表达式：

const name = "小明";

const age = 25;

const msg = `你好，我是${name}，今年${age}岁。`;

console.log(msg); // 你好，我是小明，今年25岁。

模板字符串支持复杂表达式和函数调用

大括号内不限于变量，可以是任意合法 JavaScript 表达式：

• 数学运算：${a + b * 2}
• 三元判断：${score >= 60 ? '及格' : '不及格'}
• 函数调用：${getName().toUpperCase()}
• 对象属性访问：${user.profile?.avatar || 'default.png'}

多行字符串与HTML片段拼接

模板字符串天然支持换行，适合生成 HTML 或配置文本：

const list = ['苹果', '香蕉', '橙子'];

const html = `
\n  ${list.map(item => `
${item}
`).join('')}\n
`;

// 输出带缩进的HTML字符串（注意：浏览器会自动忽略多余空白）

简单自定义模板函数（标签模板）

通过“标签函数”可实现更高级控制，比如转义、国际化或预编译：

function escape(strings, ...values) {

  return strings.reduce((acc, str, i) => {

    const val = values[i] ?? '';

    return acc + str + String(val).replace(/&/g, '&').replace(/
  }, '');

}

const user = '';

const safeHtml = escape`${user}`; //