我們通常需要對字元串進行操作以顯示所需的結果，這是前端必備的技能。需要字元串方法來進行驗證、向最終用戶顯示正確的信息等等。

以下是你應該記住的一些字元串的操作方法。這樣，你將不再需要一直搜索它們。我還將包括簡單明了的示例，說明如何使用它們。

首先，了解一下JavaScript 字元串的背景。

JavaScript 字元串可以用單引號或雙引號定義，如下所示：

const singleQuoteString = 'Hello';
const doubleQuoteString = "Hello";

字元串是一個字元序列。將字元串視為字元數組會很有幫助。第一個字元是索引 0，然後是 1、2、3 等。

你經常需要使用這些索引和命令來分解、檢索或更改字元串的某些部分。我還將在鏈接中提供每種方法的文檔。

01、str.length

這個簡單的命令返回字元串的長度，這在前端很常見，用於對文本欄位輸入進行數據驗證、限制某些數據對象的長度等等。

let str = "matt";
console.log(str.length); // this outputs 4

02、charAr(index)

此函數將字元串視為字元數組。它檢索你提供的索引處的字元。下面是一個例子：

let str = 'The cool programmer';
console.log(str.charAt(0)); // this outputs T
console.log(str.charAt(4)); // this outputs c

如果你需要檢查字元串的一致性，這會很有幫助。字元串中的最後一個索引是 string.length — 1。

就像數組一樣，始終記住字元串中的第一個索引是 0，而不是 1。這讓我失望的次數比我想承認的要多。

03、concat(string)

此方法將兩個字元串連接成一個。如果你需要將某些內容附加到字元串或組合它們，此方法可以派上用場。這是它的用途：

const string1 = 'clean ';
const string2 = 'code'
console.log(string1.concat(string2)); // This returns 'clean code'

老實說，我很少使用 concat 方法。我認為 JavaScript 模板字元串要乾淨得多；他們用更少的代碼完成同樣的事情。你還可以輕鬆地將字元串變數插入到另一個字元串中，而無需擔心連接或索引。為此，你使用 ` 符號：

const string1 = 'clean';
const string2 = 'code'
const templateString = `${clean} ${code}`;
console.log(templateString); // this prints out clean code

現在，這是乾淨的代碼！

04、includes(string)

此函數檢查字元串是否包含子字元串。下面是一個例子：

const str = 'hello world';
console.log(str.includes('hello')); // true
console.log(str.includes('word')); // false

就像許多這些方法一樣，這有助於驗證字元串是否包含用於驗證目的的字元串中預期的字詞或子字元串。

05、match(regex string)

「match」函數檢查字元串是否與正則表達式匹配。正則表達式是一種字元模式，可用於驗證字元串是否為特定格式。這通常可以用於前端的欄位驗證。假設你需要驗證一個字元串是否只包含字母。下面是一個例子：

const firstName = "Matt";
const badFirstName = "Matthew4";
const nameRegex = /^[a-zA-Z]+$/
console.log(firstName.match(nameRegex)); // True
console.log(badFirstName.match(nameRegex)); // False

名字變數是有效的，因為它只包含字母。錯誤的名字變數失敗，因為它有一個數字。

06、replace（stringToBeReplaced，stringToAdd）

此方法獲取字元串中出現的字元並將其替換為另一個字元。也許用戶在文本欄位中輸入了電話號碼，並且必須添加破折號而不是空格。你可以這樣做：

const userInput = '414 555 5656';
console.log(userInput.replace(' ', '-')); // 414-555-5656

字元串中的空格將替換為破折號。這有助於轉換字元串以適合你需要的數據格式。

07、split(string)

有時，你可能需要根據某個字元或其他字元串拆分字元串。此函數返回一個子字元串數組。下面是一個用空格分割字元串的例子：

const hello = "Hello World";
const helloWorldSplit = hello.split(' ');
console.log(helloWorldSplit); // ["Hello", "World"];
console.log(helloWorldSplit[0]); // "Hello"

拆分後，你可以像訪問數組一樣訪問新字元串。

08、substring(index, index)

有時，你必須在某個索引或索引範圍處拆分字元串。對於這個函數，你傳入你想要開始的元素的索引，以及你想要子字元串結束的字元串中的索引。下面是一個例子：

const hello = 'Hello World';
console.log(hello.substring(1, 4)); // ell

警告：注意它，如何不列印子字元串 4 處的字元。當 4 作為第二個參數提供時，它只列印索引 1-3 的字元。end 參數是停止點，不包含在子字元串中。

09、toLowercase()/toUppercase()

這些方法接受一個字元串並將其轉換為全部大寫或全部小寫。如果你想確保你正在查看的字元串不區分大小寫，這會很有幫助。

const firstName = "Matt";
console.log(firstName.toUpperCase()); // MATT

在進行驗證檢查時將所有字元串轉換為大寫或小寫並不是一個壞主意，以確保當數據不區分大小寫時，應用程序按預期運行。

10、trim()

此方法是文本欄位輸入的另一種常見方法。它從任何字元串中刪除空格。如果用戶輸入以空格結尾的內容，這通常是一個有用的調用函數。在字元串末尾留一個空格可能會導致欄位驗證和其他功能失效。

const stringWithSpace = 'John ';
console.log(stringWithSpace.trim()); // this will be 'John'

我要學習的字元串方法列表到此結束。我希望你可以在你的項目中使用其中的一些。