跳转到内容
主菜单
主菜单
移至侧栏
隐藏
导航
首页
最近更改
随机页面
MediaWiki帮助
代码酷
搜索
搜索
中文(中国大陆)
外观
创建账号
登录
个人工具
创建账号
登录
未登录编辑者的页面
了解详情
贡献
讨论
编辑“︁
JavaScript模板字符串
”︁
页面
讨论
大陆简体
阅读
编辑
编辑源代码
查看历史
工具
工具
移至侧栏
隐藏
操作
阅读
编辑
编辑源代码
查看历史
常规
链入页面
相关更改
特殊页面
页面信息
外观
移至侧栏
隐藏
您的更改会在有权核准的用户核准后向读者展示。
警告:
您没有登录。如果您进行任何编辑,您的IP地址会公开展示。如果您
登录
或
创建账号
,您的编辑会以您的用户名署名,此外还有其他益处。
反垃圾检查。
不要
加入这个!
= JavaScript模板字符串 = '''模板字符串'''(Template Literals)是ECMAScript 6(ES6)引入的一项现代JavaScript特性,它提供了一种更灵活、更强大的字符串拼接方式。相较于传统的字符串拼接(使用单引号或双引号),模板字符串支持多行文本、变量插值以及嵌入表达式,极大提升了代码的可读性和开发效率。 == 基本语法 == 模板字符串使用反引号(<code>`</code>)包裹,而不是单引号或双引号。其核心特性包括: 1. '''多行字符串''':无需使用<code>\n</code>换行符。 2. '''变量插值''':通过<code>${expression}</code>语法嵌入变量或表达式。 3. '''标签模板''':允许自定义字符串解析逻辑(高级用法)。 === 示例:基本用法 === <syntaxhighlight lang="javascript"> // 传统字符串拼接 const name = "Alice"; const greeting = "Hello, " + name + "!"; // "Hello, Alice!" // 使用模板字符串 const greetingTemplate = `Hello, ${name}!`; // "Hello, Alice!" </syntaxhighlight> == 多行字符串 == 模板字符串支持直接换行,无需手动添加换行符: <syntaxhighlight lang="javascript"> const multiLineString = `This is a multi-line string.`; console.log(multiLineString); // 输出: // This is a // multi-line // string. </syntaxhighlight> == 变量插值与表达式 == 在<code>${}</code>中可以嵌入任意有效的JavaScript表达式: <syntaxhighlight lang="javascript"> const a = 5; const b = 10; const sum = `The sum of ${a} and ${b} is ${a + b}.`; console.log(sum); // "The sum of 5 and 10 is 15." </syntaxhighlight> == 实际应用场景 == 以下是模板字符串的常见应用场景: === 1. 动态生成HTML === <syntaxhighlight lang="javascript"> const user = { name: "Bob", age: 25 }; const html = ` <div class="user-card"> <h2>${user.name}</h2> <p>Age: ${user.age}</p> </div> `; </syntaxhighlight> === 2. 生成SQL查询(注意安全风险) === <syntaxhighlight lang="javascript"> const table = "users"; const id = 123; const query = `SELECT * FROM ${table} WHERE id = ${id}`; </syntaxhighlight> === 3. 国际化(i18n)字符串 === <syntaxhighlight lang="javascript"> const lang = "en"; const messages = { en: { welcome: name => `Welcome, ${name}!` }, es: { welcome: name => `¡Bienvenido, ${name}!` } }; console.log(messages[lang].welcome("Ana")); // "Welcome, Ana!" </syntaxhighlight> == 高级特性:标签模板 == 标签模板允许通过函数自定义模板字符串的解析方式: <syntaxhighlight lang="javascript"> function highlight(strings, ...values) { return strings.reduce((result, str, i) => `${result}${str}<span class="highlight">${values[i] || ''}</span>`, ''); } const name = "Alice"; const age = 30; const highlighted = highlight`Name: ${name}, Age: ${age}`; // 输出:Name: <span class="highlight">Alice</span>, Age: <span class="highlight">30</span> </syntaxhighlight> == 性能考虑 == 虽然模板字符串在可读性上优于传统拼接,但在极端性能敏感的场景中,大量使用动态插值可能影响性能。V8等现代引擎已对其进行了高度优化,通常情况下无需担心。 == 总结 == 模板字符串是JavaScript中一项强大的现代特性,它解决了传统字符串拼接的诸多痛点: * 更清晰的语法 * 原生支持多行文本 * 动态插值能力 * 可扩展的标签模板功能 对于初学者,建议优先使用模板字符串替代传统拼接方式,以提升代码质量和可维护性。 [[Category:编程语言]] [[Category:JavaScript]] [[Category:Javascript现代特性]]
摘要:
请注意,所有对代码酷的贡献均被视为依照知识共享署名-非商业性使用-相同方式共享发表(详情请见
代码酷:著作权
)。如果您不希望您的文字作品被随意编辑和分发传播,请不要在此提交。
您同时也向我们承诺,您提交的内容为您自己所创作,或是复制自公共领域或类似自由来源。
未经许可,请勿提交受著作权保护的作品!
取消
编辑帮助
(在新窗口中打开)