JavaScript字符串高效操作技巧

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《JavaScript字符串操作及高效处理技巧》，以下内容主要包含等知识点，如果你正在学习或准备学习文章，就都不要错过本文啦~让我们一起来看看吧，能帮助到你就更好了！

现代 JavaScript 中首选 template literals（反引号），因其支持多行、变量插值和表达式求值，且经 V8 等引擎深度优化；+ 拼接可读性差、易出错、性能低。

字符串拼接用 + 还是 template literals？

现代 JavaScript 中，template literals（反引号）是首选，它天然支持多行、变量插值和表达式求值，且 V8 等引擎对其做了深度优化。直接用 + 拼接多个字符串在旧代码中常见，但可读性差、易出错，且在循环中反复拼接会触发多次内存分配。

• 避免：str = str + 'a' + 'b' + item —— 每次 + 都生成新字符串对象
• 推荐：`prefix ${item} suffix ${count > 0 ? 'active' : 'idle'}`
• 注意：template literals 中的表达式仍会执行，不要放副作用逻辑（如 ${console.log('run')}）

String.prototype.includes() 和 indexOf() 怎么选？

两者都能判断子串是否存在，但语义和性能略有差异。includes() 返回布尔值，语义清晰；indexOf() 返回索引位置，适合需要定位的场景。在大多数现代引擎中，二者底层实现已趋同，性能差距可忽略，但 includes() 更安全 —— 它不会把 0 误判为“不存在”。

• 查存在性：优先用 str.includes('target')，不用 str.indexOf('target') !== -1
• 需位置信息时才用 indexOf() 或更精确的 str.indexOf('target', fromIndex)
• includes() 支持第二个参数 fromIndex（ES2023 起），但兼容性略低于 indexOf()

批量替换用 replaceAll() 还是正则 replace()？

replaceAll() 是专为全局字面量替换设计的，无需转义正则特殊字符，也不用担心 /g 标志遗漏。而 replace() 配合正则虽灵活，但容易因未加 g 导致只换第一个，或因未 RegExp.escape（JS 无内置）导致注入漏洞。

• 纯文本替换：用 str.replaceAll('old', 'new')，安全、简洁、意图明确
• 需模式匹配（如大小写不敏感、边界控制）：用 str.replace(/old/gi, 'new')
• 动态内容替换时，若 old 来自用户输入，又必须用正则，得手动转义：old.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')

长字符串截断和清理：别用 substr() 或 substring()

substr() 已被废弃（MDN 标记为 deprecated），substring() 在负数参数下行为反直觉（自动转为 0）。统一用 slice()：语义清晰、负数从末尾计数、不修改原字符串、与数组 API 一致。

const str = 'hello world';
str.slice(0, 5);     // 'hello'
str.slice(-5);       // 'world'
str.slice(6);        // 'world'
str.slice(100);      // ''（越界返回空串，不报错）

• 截断带省略号：str.length > 10 ? str.slice(0, 7) + '...' : str
• 去首尾空格用 trim()，去所有空白字符用 replace(/\s/g, '')
• 大量字符串处理（如日志清洗）时，避免链式调用多个 replace()，可合并为单个正则：str.replace(/[\r\n\t\s]+/g, ' ').trim()

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript字符串高效操作技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。