4個 JavaScript 字符串操做技巧

字符串是編程世界最基本最重要的數據類型之一，JavaScript 也不例外。JavaScript 字符串是不可變的，對於存儲能夠由字符、數字和 Unicode 組成的文本很便捷。JavaScript 提供了許多內置函數，容許以不一樣的方式建立和操做字符串。在本文將分享一些優雅的操做 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")); // true
console.log(hasText(arrayTitles, "php")); // false

總結

JavaScript 字符串操做是項目中常見的操做，上面4個技巧值得學習並應用到實際開發中。