什么是模板字符串_它比普通字符串好在哪里

12次阅读

模板字符串es6用反引号定义的字符串新语法,支持多行书写、变量嵌入${}、表达式计算及函数标签化处理,使文本操作更自然、安全、少出错。

什么是模板字符串_它比普通字符串好在哪里

模板字符串是 ES6 引入的字符串新写法,用反引号 ` 包裹,核心优势不是“更高级”,而是让常见操作更自然、更少出错。

写多行文本不用记 n

普通字符串换行必须手动加 n,还容易漏掉引号或加号;模板字符串直接按回车写,所见即所得:

  • 普通写法:const msg = "标题:n内容:n结尾。"
  • 模板写法:const msg = `标题:内容:结尾。`(缩进和空行都保留)

嵌变量像说话一样自然

拼接用户信息、日志、提示语时,不用反复切开引号加号再拼回去。${} 里直接写变量名、属性、甚至简单运算:

  • const user = {name: "小陈", score: 92};
  • console.log(`欢迎 ${user.name},得分 ${user.score + 1}!`);
  • 还能放三元表达式:`${score >= 60 ? '通过' : '重考'}`

能配合函数做定制化处理

普通字符串只是静态文本,模板字符串可以“带参数”调用函数,比如自动转义 html、高亮关键词、格式化 sql

  • 定义一个安全函数:function safe(strs, ...vals) { return strs.map((s, i) => s + (vals[i] || '').replace(/, '
  • 调用:safe`
    ${userInput}

    ` —— 自动防 XSS

  • 这种能力普通字符串完全做不到

原始路径、调试日志更省心

读取文件路径、正则表达式、SQL 片段时,普通字符串要疯狂转义反斜杠;模板字符串配合 String.raw 一行搞定:

  • const path = String.raw`C:UsersAliceconfig.json`;(反斜杠原样保留)
  • 调试时直接写:console.log(`[DEBUG] name=${name}, time=${Date.now()}`);
  • 不用再数引号、加号、括号是否配对
text=ZqhQzanResources