模板字符串使用反引号定义,可嵌入变量${name}、表达式${a+b}、函数调用${getName()}及三元运算${score>=60?'及格':'不及格'},支持多行文本与标签模板,提升字符串处理灵活性。
模板字符串是JavaScript中一种更灵活、更简洁的字符串处理方式,尤其适合拼接变量和多行文本。它使用反引号(`)包裹字符串,可以在其中直接嵌入变量或表达式。
模板字符串用反引号定义,变量或表达式通过 ${} 插入:
const name = "小明";
const age = 25;
const message = `你好,我是${name},今年${age}岁。`;
console.log(message); // 输出:你好,我是小明,今年25岁。
传统字符串换行需要转义或拼接,而模板字符串天然支持换行:
const html = `这是第一段
这是第二段
`; console.log(html);
输出内容保留原始格式,适合生成HTML或配置文本。
占位符内不仅可以放变量,还能运行表达式、三元运算甚至函数:
const a = 10;
const b = 20;
const result = `${a} + ${b} = ${a + b}`;
console.log(result); // 10 + 20 = 30
const getName = () => "张三";
console.log(`用户姓名:${getName()}`); // 用户姓名:张三
const score = 85;
console.log(`成绩评定:${score >= 60 ? '及格' : '不及格'}`); // 成绩评定:及格
模板字符串可与函数结合,实现更复杂的处理逻辑。函数接收字符串部分和变量值数组:
function highlight(strings, ...values) { let result = ''; strings.forEach((str, i) => { result += str; if (i < values.length) { result += `${values[i]}`; } }); return result; } const user = "李四"; const visits = 5; const htmlOutput = highlight`欢迎${user},您是第${visits}次访问!`; console.log(htmlOutput); // 输出:欢迎李四,您是第5次访问!
这种模式常用于国际化、样式化输出或安全转义。
基本上就这些。模板字符串让JS字符串操作更直观,减少拼接错误,提升代码可读性。实际开发中建议优先使用。不复杂但容易忽略细节,比如注意反引号不是单引号。