首页 > web前端 > js教程 > 正文

javascript如何格式化字符串_模板字符串怎么用

幻影之瞳
发布: 2025-12-15 17:25:02
原创
299人浏览过
JavaScript中格式化字符串最简洁的方式是模板字符串,用反引号包裹并支持${}嵌入变量、表达式、函数调用及多行文本,但需注意转义、兼容性和空白处理。

javascript如何格式化字符串_模板字符串怎么用

JavaScript 中格式化字符串最简洁的方式就是用模板字符串(Template Literals),它用反引号 ` 包裹,支持嵌入变量和表达式,还能换行、写多行文本,比拼接字符串或 String.prototype.format(JS 本身没有这个方法)自然得多。

模板字符串的基本写法

用反引号 ` 替代单引号或双引号,内部用 ${} 插入变量或任意合法表达式:


const name = '张三';
const age = 28;
const msg = `你好,我是${name},今年${age}岁。`;
console.log(msg); // 你好,我是张三,今年28岁。

支持表达式和函数调用

${} 里不只能放变量,还能写运算、三元判断、甚至调用函数:

  • ${age >= 18 ? '成年人' : '未成年人'}
  • ${Math.max(10, 20, 5)} → 输出 20
  • ${getName().toUpperCase()}(假设 getName() 返回字符串)

多行字符串与缩进处理

模板字符串天然支持换行,但要注意:回车和空格会原样保留。如果想让代码缩进清晰又不把空格带进结果,可以用以下技巧:

佳蓝在线销售系统(创业版) 佳蓝在线销售
佳蓝在线销售系统(创业版) 佳蓝在线销售

1、对ASP内核代码进行DLL封装,从而大大提高了用户的访问速度和安全性;2、采用后台生成HTML网页的格式,使程序访问速度得到进一步的提升;3、用户可发展下级会员并在下级购买商品时获得差额利润;4、全新模板选择功能;5、后台增加磁盘绑定功能;6、后台增加库存查询功能;7、后台增加财务统计功能;8、后台面值类型批量设定;9、后台财务曲线报表显示;10、完善订单功能;11、对所有传输的字符串进行安全

佳蓝在线销售系统(创业版) 佳蓝在线销售 0
查看详情 佳蓝在线销售系统(创业版) 佳蓝在线销售

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

  • 直接换行(适合简单多行,如 HTML 片段):
    const html = `<div>\n <p>内容</p>\n</div>`;
  • .trim().replace(/\s+/g, ' ') 清理多余空白
  • 更推荐:用带标签的模板字符串(如自定义 stripIndent 函数)做自动去首行缩进,但日常开发中多数情况直接写、适当换行即可

注意点和常见坑

模板字符串虽好,但别忘了几个细节:

  • 必须用反引号 `,不是单引号或双引号
  • ${} 中不能直接写注释,也不能嵌套另一个模板字符串(除非先赋值给变量)
  • 如果要输出字面量 ${,写成 \${ 即可转义
  • 在老版本浏览器(如 IE)中不支持,需用 Babel 编译或检查兼容性

基本上就这些。模板字符串不是“高级技巧”,而是现代 JS 字符串操作的默认方式——写得清楚、读得明白、改起来也顺手。

以上就是javascript如何格式化字符串_模板字符串怎么用的详细内容,更多请关注php中文网其它相关文章!

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

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