值得了解的操作JS字符串的4个小技巧

JavaScript 字符串是不可变的，对于存储可以由字符、数字和 Unicode 组成的文本很便捷。JavaScript 提供了许多内置函数，允许以不同的方式创建和操作字符串。下面一起来看看这4个优雅的操作 JavaScript 字符串的技巧。

1. 拆分字符串

JavaScript中的 splIT() 方法使用指定的分隔符字符串将一个 String 对象分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置。 有两个可选参数（分隔符和可选限制计数）将字符串转换为字符或子字符串数组，不设置分隔符将返回数组中的完整字符串。分隔符可以采用单个字符、字符串，甚至正则表达式。下面是使用正则表达式将使用逗号和空格拆分字符串的代码：

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() 可以接受两个可选参数，第二个参数是一个替换器，可以在其中指定要打印的键的数组或清除它们的函数。如下代码：

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() 的第三个参数通过指定缩进（在嵌套块中很有用）来格式化 JSON，可以传递一个数字来设置缩进间距，甚至可以传递一个字符串来替换空格。如下代码：

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`;
    

前两种创建方式基本相同，并且可以混合和匹配以连接或添加带引号的字符串（通过使用相反的语法风格），而反引号可以对字符串进行花哨而强大的操作。

反引号也称为模板字面量，反引号在创建多行字符串和嵌入表达式时很方便。下面是如何在 JavaScript 中使用字符串插值创建多行字符串的代码：

const year = "2021";
    const month = 7;
    const day = 2;
const detail = `今天是${
year}
年${
month}
月${
day}
    日，是个不错的日子！`;
    console.log(detail);
    

输出的结果也换行了，如下：

今天是2021年7月2日，是个不错的日子！

除了字符串字面量，在 ${ } 中允许任何有效的表达式，它可以是一个函数调用或表达式，甚至是一个嵌套模板。

标记模板是模板字面量的一种高级形式，它允许使用一个函数来解析模板字面量，其中内嵌的表达式是参数。如下代码：

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"));
     // trueconsole.log(hasText(arrayTitles, "php"));
     // false

总结

JavaScript 字符串操作是项目中常见的操作，上面4个技巧值得学习并应用到实际开发中。

更多编程相关知识，请访问：编程入门！！

以上就是值得了解的操作JS字符串的4个小技巧的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！