目錄

• 前言
• 1. 拆分字串
  
• 2. ON格式化和解析
  
• 3. 多行字串和嵌入式表示式
  
• 4. 驗證字串陣列中是否存在子字串
• 總結

前言

字串是世界最基本最重要的資料型別之一， 也不例外。Script 字串是不可變的，對於儲存可以由字元、數字和 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() 函式拆分的字www.cppcns.com符串可以通過簡單地通過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(artwww.cppcns.comicle,["title","comments"])); // {"title":"JavaScript 字串技巧","comments":null}
console.log(JSON.stringify(article,[])); // {}

對於一個巨大的 JSON，傳遞一個長陣列可能影響可讀性及效率。因此，可以設定替換函式併為要跳過的鍵返回 undefined ，如下程式碼：

const result = JSON.stringify(article,(key,value) =>
    key === www.cppcns.com"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 = www.cppcns.com"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",""];
const hasText = (array,findText) =>
    array.some((item) => item.includes(findText));

console.log(hasText(arrayTitles,"script")); // true
console.log(hasText(arrayTitles,"")); // false

總結

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

到此這篇關於JavaScript字串操作的四個實用技巧的文章就介紹到這了,更多相關JS字串操作技巧內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！