JavaScript字符串操作以模板字符串为主流,因其支持变量插值、多行文本和表达式嵌入;原生方法如slice、replace、trim等返回新字符串,不修改原值。

JavaScript操作字符串主要靠原生方法和模板字符串,后者在现代开发中更简洁、功能更强。
常用字符串操作方法
字符串是不可变类型,所有方法都返回新字符串,不修改原值。
-
拼接:用
+或concat(),但易出错,尤其多变量时 -
查找:用
includes()、indexOf()、startsWith()等判断内容存在或位置 -
截取:用
slice()、substring()、substr()(已废弃)提取子串 -
替换:用
replace()(支持正则)或replaceAll()(全局替换) -
大小写转换:
toLowerCase()、toUpperCase() -
去空格:
trim()、trimStart()、trimEnd()
模板字符串(Template Literals)的核心优势
用反引号 ` 包裹,支持嵌入表达式和多行文本,解决传统字符串拼接的痛点。
-
变量插值更直观:用
${expression}直接插入变量或运算结果,不用反复加号拼接 -
天然支持多行:换行符会被保留,无需
\n或加号续行 - 可嵌套函数调用与逻辑:${name || '匿名'}、${items.length > 0 ? '有数据' : '为空'} 都能直接写
- 配合标签函数实现高级功能:比如做 HTML 转义、国际化、SQL 参数化等
对比示例:拼接用户信息
传统方式:
立即学习“Java免费学习笔记(深入)”;
const msg = '欢迎 ' + user.name + ',你已注册 ' + (Date.now() - user.joinTime) / (1000 * 60 * 60 * 24) + ' 天'模板字符串方式:
const msg = `欢迎 ${user.name},你已注册 ${Math.floor((Date.now() - user.joinTime) / (1000 * 60 * 60 * 24))} 天`后者可读性高、不易漏空格、计算逻辑清晰。
注意事项
- 反引号不是单引号或双引号,别混淆
- ${} 中的表达式会立即执行,注意副作用(如函数调用)
- 若需显示字面量
${,用反斜杠转义:\${ - 模板字符串本身不处理 XSS,动态插入 HTML 仍需手动转义










