JavaScript字符串操作的四个实用技巧
本文介绍JavaScript中处理字符串的四个实用技巧。包括使用split和join进行字符串拆分与重组，掌握JSON.stringify的过滤、格式化及JSON.parse的reviver用法，利用反引号实现多行字符串与表达式嵌入，以及通过includes和some验证数组中的子字符串存在性。
前言
字符串是编程中最基础且关键的数据类型之一，JavaScript 同样如此。由于 JavaScript 字符串具有不可变性，它非常适合存储包含字符、数字及 Unicode 编码的文本内容。JavaScript 内置了丰富的函数库，支持多种创建和操作字符串的方式。本文将分享几种优雅且高效的 JavaScript 字符串操作技巧。
1. 拆分字符串
JavaScript 中的 split() 方法依据指定的分隔符将字符串切割为子字符串数组，通过该分隔符确定每个切分点。该方法包含两个可选参数：分隔符和可选的数量限制，用于将字符串转换为字符或子字符串数组。若未设置分隔符，则返回包含完整字符串的数组。分隔符可以是单个字符、字符串或正则表达式。以下代码展示了如何使用正则表达式，以逗号和空格作为分隔符来拆分字符串：
const title = "4个，JavaScript 字符串技巧";
console.log(title.split(/[\s+，/]+/)); // [ '4个', 'JavaScript', '字符串技巧' ]
console.log(title.split(/[\s+，/]+/, 2)); // [ '4个', 'JavaScript' ]
通过 split() 函数拆分后的字符串，可以直接调用 join("") 方法将其重新连接起来。
2. JSON格式化和解析
JSON 并非 JavaScript 独占的数据类型，它广泛应用于前后端数据交互场景。JSON.stringify() 函数用于将对象转换为 JSON 格式的字符串。通常情况下，只需将对象作为参数传入即可，示例如下：
const article = {
title: "JavaScript 字符串技巧",
view: 30000,
comments: null,
content: undefined,
};
const strArticle = JSON.stringify(article);
console.log(strArticle); // {"title":"JavaScript 字符串技巧","view":30000,"comments":null}
从上述代码可以看出，在 stringify 过程中，undefined 值会被过滤掉，而 null 值则会保留。
JSON.stringify() 接受两个可选参数，其中第二个参数为替换器（replacer），可以指定要输出的键数组或提供清除这些键的函数。代码如下：
console.log(JSON.stringify(article, ["title", "comments"])); // {"title":"JavaScript 字符串技巧","comments":null}
console.log(JSON.stringify(article, [])); // {}
对于庞大的 JSON 数据，传递长数组可能会降低可读性和执行效率。因此，可以设置替换函数，对需要跳过的键返回 undefined，示例代码如下：
const result = JSON.stringify(article, (key, value) =>
key === "title" ? undefined : value
);
console.log(result); // {"view":30000,"comments":null}
JSON.stringify() 的第三个参数用于指定缩进格式，这在处理嵌套结构时非常有用。可以传递一个数字来设定缩进间距，或者传递一个字符串来替代空格。示例代码如下：
console.log(JSON.stringify(article, ["title"], "\t"));
输出结果格式如下：
{ "title": "JavaScript 字符串技巧" }
此外，还有一个 JSON.parse() 函数，它接收一个 JSON 字符串并将其转换为 JavaScript 对象。该函数同样接受一个 reviver 函数，可在返回结果前拦截对象属性并修改其值。
const reviver = (key, value) => (key === "view" ? 0 : value);
var jsonString = JSON.stringify(article);
var jsonObj = JSON.parse(jsonString, reviver);
console.log(jsonObj); // { title: 'JavaScript 字符串技巧', view: 0, comments: null }
3. 多行字符串和嵌入式表达式
在 JavaScript 中，创建字符串有三种方式：可以使用单引号 ''、双引号 "" 或反引号（位于键盘左上角，数字 1 左侧的按键）。
const countries1 = "China";
const countries2 = "China";
const countries3 = `China`;
前两种创建方式基本一致，可以混合使用以连接或拼接带引号的字符串（通过采用相反的语法风格）。而反引号则支持更强大且灵活的字符串操作。
反引号也被称为模板字面量（Template Literals），在创建多行字符串和嵌入表达式时非常便捷。以下代码展示了如何在 JavaScript 中使用字符串插值创建多行字符串：
const year = "2021";
const month = 7;
const day = 2;
const detail = `今天是${year}年${month}月${day}日，
是个不错的日子！`;
console.log(detail);
输出结果同样实现了换行，如下所示：
今天是2021年7月2日， 是个不错的日子！
除了字符串字面量，${} 中允许包含任何有效的表达式，它可以是函数调用、普通表达式，甚至是嵌套的模板字符串。 标记模板（Tagged Templates）是模板字面量的一种高级形式，它允许使用一个函数来解析模板字面量，其中内嵌的表达式作为参数传递。示例代码如下：
const title = "JavaScript 字符串技巧";
const view = 30000;
const detail = (text, titleExp, viewExp) => {
const [string1, string2, string3] = [...text];
return `${string1}${titleExp}${string2}${viewExp}${string3}`;
};
const intro = detail`本文的标题是《${title}》，当前阅读量是： ${view}`;
console.log(intro); // 文的标题是《JavaScript 字符串技巧》，当前阅读量是：30000
4. 验证字符串数组中是否存在子字符串
检查 JavaScript 字符串中是否存在子字符串是一项常见任务。在 ES6 中，只需使用 includes 函数即可实现。
但如果需要验证字符串是否存在于数据中，即判断数组中是否有任何一项包含指定子字符串并返回 true，若都不包含则返回 false，此时需要结合 some 函数与 includes 使用，示例代码如下：
const arrayTitles = ["Javascript", "EScript", "Golang"];
const hasText = (array, findText) =>
array.some((item) => item.includes(findText));
console.log(hasText(arrayTitles, "script")); // true
console.log(hasText(arrayTitles, "php")); // false
总结
JavaScript 字符串操作是项目开发中的常见需求，上述四个技巧值得学习并应用于实际开发中。
到此这篇关于JavaScript字符串操作的四个实用技巧的文章就介绍到这了,更多相关JS字符串操作技巧内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58