JavaScript中怎么實(shí)現(xiàn)字符串操作

JavaScript中怎么實(shí)現(xiàn)字符串操作，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

1. 拆分字符串

JavaScript中的 split() 方法使用指定的分隔符字符串將一個(gè) String 對(duì)象分割成子字符串?dāng)?shù)組，以一個(gè)指定的分割字串來(lái)決定每個(gè)拆分的位置。 有兩個(gè)可選參數(shù)（分隔符和可選限制計(jì)數(shù)）將字符串轉(zhuǎn)換為字符或子字符串?dāng)?shù)組，不設(shè)置分隔符將返回?cái)?shù)組中的完整字符串。分隔符可以采用單個(gè)字符、字符串，甚至正則表達(dá)式。下面是使用正則表達(dá)式將使用逗號(hào)和空格拆分字符串的代碼：

const title = "4個(gè)，JavaScript 字符串技巧";
console.log(title.split(/[\s+，/]+/)); // [ '4個(gè)', 'JavaScript', '字符串技巧' ]
console.log(title.split(/[\s+，/]+/, 2)); // [ '4個(gè)', 'JavaScript' ]

通過(guò) split() 函數(shù)拆分的字符串可以通過(guò)簡(jiǎn)單地通過(guò)join("") 連接起來(lái)。

2. JSON格式化和解析

JSON 不是僅限 JavaScript 的數(shù)據(jù)類型，并且廣泛用于前后端數(shù)據(jù)交互。JSON.stringify() 函數(shù)用于將對(duì)象轉(zhuǎn)換為 JSON 格式的字符串。通常，只需將對(duì)象作為參數(shù)即可，如下所示：

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 中會(huì)過(guò)濾掉 undefined 的值，但 null 值不會(huì)。

JSON.stringify()  可以接受兩個(gè)可選參數(shù)，第二個(gè)參數(shù)是一個(gè)替換器，可以在其中指定要打印的鍵的數(shù)組或清除它們的函數(shù)。如下代碼：

console.log(JSON.stringify(article, ["title", "comments"])); // {"title":"JavaScript 字符串技巧","comments":null}
console.log(JSON.stringify(article, [])); // {}

對(duì)于一個(gè)巨大的 JSON，傳遞一個(gè)長(zhǎng)數(shù)組可能影響可讀性及效率。因此，可以設(shè)置替換函數(shù)并為要跳過(guò)的鍵返回 undefined ，如下代碼：

const result = JSON.stringify(article, (key, value) =>
    key === "title" ? undefined : value
);
console.log(result); // {"view":30000,"comments":null}

JSON.stringify()  的第三個(gè)參數(shù)通過(guò)指定縮進(jìn)（在嵌套塊中很有用）來(lái)格式化 JSON，可以傳遞一個(gè)數(shù)字來(lái)設(shè)置縮進(jìn)間距，甚至可以傳遞一個(gè)字符串來(lái)替換空格。如下代碼：

console.log(JSON.stringify(article, ["title"], "\t"));

輸出的格式如下：

{
    "title": "JavaScript 字符串技巧"
}

還有一個(gè) JSON.parse() 函數(shù)，它接受一個(gè) JSON 字符串并將其轉(zhuǎn)換為一個(gè) JavaScript 對(duì)象。它還接受一個(gè) reviver 函數(shù)，可以在返回值之前攔截對(duì)象屬性并修改屬性值。

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. 多行字符串和嵌入式表達(dá)式

在 JavaScript 中有三種創(chuàng)建字符串的方式，可以使用單引號(hào) '' 、雙引號(hào) "" 或反引號(hào)（鍵盤(pán)的左上方， 1 的左邊按鍵）。

const countries1 = "China";
const countries2 = "China";
const countries3 = `China`;

前兩種創(chuàng)建方式基本相同，并且可以混合和匹配以連接或添加帶引號(hào)的字符串（通過(guò)使用相反的語(yǔ)法風(fēng)格），而反引號(hào)可以對(duì)字符串進(jìn)行花哨而強(qiáng)大的操作。

反引號(hào)也稱為模板字面量，反引號(hào)在創(chuàng)建多行字符串和嵌入表達(dá)式時(shí)很方便。下面是如何在 JavaScript 中使用字符串插值創(chuàng)建多行字符串的代碼：

const year = "2021";
const month = 7;
const day = 2;
const detail = `今天是${year}年${month}月${day}日，
是個(gè)不錯(cuò)的日子！`;

console.log(detail);

輸出的結(jié)果也換行了，如下：

今天是2021年7月2日，
是個(gè)不錯(cuò)的日子！

除了字符串字面量，在 ${} 中允許任何有效的表達(dá)式，它可以是一個(gè)函數(shù)調(diào)用或表達(dá)式，甚至是一個(gè)嵌套模板。
標(biāo)記模板是模板字面量的一種高級(jí)形式，它允許使用一個(gè)函數(shù)來(lái)解析模板字面量，其中內(nèi)嵌的表達(dá)式是參數(shù)。如下代碼：

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`本文的標(biāo)題是《${title}》，當(dāng)前閱讀量是： ${view}`;

console.log(intro); // 文的標(biāo)題是《JavaScript 字符串技巧》，當(dāng)前閱讀量是：30000

4. 驗(yàn)證字符串?dāng)?shù)組中是否存在子字符串

查找 JavaScript 字符串中是否存在子字符串時(shí)間容易的事情，在 ES6 中，只需要使用 includes 函數(shù)。

但需要驗(yàn)證字符串是否存于數(shù)據(jù)中，主要數(shù)組中其中一項(xiàng)包含就返回 true ，如果都不包含返回 false，因此需要使用 some 函數(shù)與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

看完上述內(nèi)容，你們掌握J(rèn)avaScript中怎么實(shí)現(xiàn)字符串操作的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！