0

0

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

狼影

狼影

发布时间:2026-01-28 12:41:03

|

970人浏览过

|

来源于php中文网

原创

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

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

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

模板字符串用 `(反引号)而不是 '"

这是最基础但最容易忽略的点:写成 "Hello ${name}" 不会生效,必须是 `Hello ${name}`浏览器或 Node.js 遇到单双引号里的 ${...} 会当作普通文本,不会解析为插值。

  • ✅ 正确:`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'}` —— 支持可选链和空值合并
  • ⚠️ 注意:不能放语句(如 iffor),只接受表达式

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

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

立即学习Java免费学习笔记(深入)”;

奇布塔
奇布塔

基于AI生成技术的一站式有声绘本创作平台

下载
  • ✅ 清晰写法:
    `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 的处理

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

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
数据分析工具有哪些
数据分析工具有哪些

数据分析工具有Excel、SQL、Python、R、Tableau、Power BI、SAS、SPSS和MATLAB等。详细介绍:1、Excel,具有强大的计算和数据处理功能;2、SQL,可以进行数据查询、过滤、排序、聚合等操作;3、Python,拥有丰富的数据分析库;4、R,拥有丰富的统计分析库和图形库;5、Tableau,提供了直观易用的用户界面等等。

727

2023.10.12

SQL中distinct的用法
SQL中distinct的用法

SQL中distinct的语法是“SELECT DISTINCT column1, column2,...,FROM table_name;”。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

327

2023.10.27

SQL中months_between使用方法
SQL中months_between使用方法

在SQL中,MONTHS_BETWEEN 是一个常见的函数,用于计算两个日期之间的月份差。想了解更多SQL的相关内容,可以阅读本专题下面的文章。

350

2024.02.23

SQL出现5120错误解决方法
SQL出现5120错误解决方法

SQL Server错误5120是由于没有足够的权限来访问或操作指定的数据库或文件引起的。想了解更多sql错误的相关内容,可以阅读本专题下面的文章。

1242

2024.03.06

sql procedure语法错误解决方法
sql procedure语法错误解决方法

sql procedure语法错误解决办法:1、仔细检查错误消息;2、检查语法规则;3、检查括号和引号;4、检查变量和参数;5、检查关键字和函数;6、逐步调试;7、参考文档和示例。想了解更多语法错误的相关内容,可以阅读本专题下面的文章。

360

2024.03.06

oracle数据库运行sql方法
oracle数据库运行sql方法

运行sql步骤包括:打开sql plus工具并连接到数据库。在提示符下输入sql语句。按enter键运行该语句。查看结果,错误消息或退出sql plus。想了解更多oracle数据库的相关内容,可以阅读本专题下面的文章。

820

2024.04.07

sql中where的含义
sql中where的含义

sql中where子句用于从表中过滤数据,它基于指定条件选择特定的行。想了解更多where的相关内容,可以阅读本专题下面的文章。

581

2024.04.29

sql中删除表的语句是什么
sql中删除表的语句是什么

sql中用于删除表的语句是drop table。语法为drop table table_name;该语句将永久删除指定表的表和数据。想了解更多sql的相关内容,可以阅读本专题下面的文章。

423

2024.04.29

俄罗斯Yandex引擎入口
俄罗斯Yandex引擎入口

2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

158

2026.01.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.2万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号