javascript模板字符串是什么_它如何方便地拼接字符串【教程】

模板字符串是支持多行、嵌入表达式、无需转义的字符串字面量，用反引号定义，${...}中可放任意表达式但非语句，天然支持换行但需注意缩进，结合标签函数可扩展功能。

JavaScript 模板字符串不是“更高级的字符串拼接”，而是支持多行、嵌入表达式、无需转义的字符串字面量——它解决的是传统字符串在可读性、维护性和表达能力上的硬伤。

模板字符串用 `（反引号）而不是 ' 或 "

这是最基础但最容易忽略的点：写成 "Hello $

• ✅ 正确：`Hello ${user.name}`
• ❌ 错误："Hello ${user.name}"（输出就是字面量 Hello ${user.name}）
• ⚠️ 注意：` 在英文键盘是 Esc 下方、Tab 上方那个键，不是单引号

${...} 里可以放任意 JavaScript 表达式，不只是变量

它不是“变量占位符”，而是运行时求值的表达式容器。这意味着你可以直接调用函数、做运算、访问属性链，甚至写三元表达式。

• `Price: $${(price * 1.1).toFixed(2)}` —— 计算 + 格式化一步到位
• `Status: ${isActive ? 'Online' : 'Offline'}` —— 内联条件逻辑
• `ID: ${data?.id ?? 'unknown'}` —— 支持可选链和空值合并
• ⚠️ 注意：不能放语句（如 if、for），只接受表达式

多行字符串天然支持，但缩进会原样保留

换行符会被保留在最终字符串中，所以直接写会多出大量空格和制表符，影响 JSON 输出或 DOM 渲染。

• ✅ 清晰写法：

  `Line 1
  Line 2
  Line 3`

• ⚠️ 常见坑：

  const html = `
    
  Hello
  `;

  ——开头换行和缩进都会变成字符串的一部分
• ? 补救方式：用 .trim() 或模板字符串内手动换行+字符串连接，例如：`` + `

  Hello

  ` + ``

标签函数让模板字符串具备“处理逻辑”的能力

模板字符串本身只是语法糖，但加上前缀函数（如 html`...`、sql`...`），就能实现自动转义、语法校验、甚至编译优化。

• 常见用例：String.raw`C:\temp\notes.txt` —— 避免反斜杠被解释为转义
• 自定义标签示例：

  function upper(strings, ...values) {
    return strings[0] + values.map(v => String(v).toUpperCase()).join('') + strings[1];
  }
  upper`hello ${'world'}`; // → "hello WORLD"

• ⚠️ 注意：标签函数第一个参数是字符串数组（静态部分），后续才是插值结果；不要漏掉对 strings 的处理

真正容易被忽略的是嵌套模板字符串的可读性——当 ${...} 里又出现模板字符串时，反引号层级一多，眼睛就容易看错边界。这时候宁可拆成变量，也别硬塞三层 `...${`...${...}`...}`...。

# 浏览器  # js  # json  # javascript  # java  # String  # if  # html  # 字符串  # node  # for  # sql  # node.js  # 字符串数组 

相关栏目： <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 AI推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 SEO优化<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 技术百科<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 谷歌推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 百度推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 网络营销<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 案例网站<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 精选文章<？ｍｕｍａ echo $count; ?> 】