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

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

首先，了解一下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'

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