模板字符串使用反引号包裹,支持变量嵌入${name}、表达式计算${10+5}及多行文本,比传统拼接更简洁清晰。

JavaScript 模板字符串(Template Strings)是 ES6 引入的一种更灵活、更易读的字符串创建方式。相比传统的字符串拼接,模板字符串支持多行文本、变量嵌入和表达式计算,让代码更简洁清晰。
模板字符串的基本语法
模板字符串使用反引号(`)包裹,而不是单引号或双引号。这是它的标志性特征。
示例:
let str = `这是一个模板字符串`;
与传统写法对比:
‘这是普通字符串’ “这也是普通字符串” `这才是模板字符串`
在模板字符串中嵌入变量
使用 ${变量名} 的语法可以将变量直接插入字符串中,无需字符串拼接。
示例:
let name = “小明”;
let age = 25;
let message = `你好,我是${name},今年${age}岁。`;
console.log(message); // 输出:你好,我是小明,今年25岁。
这种写法比传统的加号拼接更直观:
“你好,我是” + name + “,今年” + age + “岁。”
嵌入表达式与函数调用
模板字符串中的 ${} 不仅能放变量,还能放入任意 JavaScript 表达式,包括运算、三元操作、函数调用等。
示例:
`10 + 5 等于 ${10 + 5}` → 输出:10 + 5 等于 15 `${age > 18 ? ‘成年人’ : ‘未成年人’}` → 根据年龄判断 `当前时间:${new Date().toLocaleString()}` → 插入当前时间 function getName(){ return “张三”; }
`欢迎你,${getName()}!`
支持多行字符串
模板字符串天然支持换行,不需要用 n 或拼接多行。
示例:
let html = `
第一段
第二段
`;
输出时会保留原始格式,适合生成 HTML 片段或配置文本。
基本上就这些。模板字符串让 JS 字符串处理变得更自然、更强大。只要记住用反引号包裹,变量和表达式用 ${} 包起来就行。日常开发中建议优先使用,提升可读性和维护性。
以上就是JS模板字符串怎么用_JS模板字符串语法与变量嵌入方法详解的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1536410.html
微信扫一扫
支付宝扫一扫