php数组打印格式化前端架构师成长之路4个 JavaScript 字符串操作技能

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 值不会。

php数组打印格式化前端架构师成长之路4个 JavaScript 字符串操作技能 Docker

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日，是个不错的日子！

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

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

查找 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个技巧值得学习并运用到实际开拓中。