字符串是每種編程語言的基本組成部分，而 JavaScript 具有許多強大的內置函數，可以讓開發人員輕松處理字符串。

• JavaScript 數組操作必須熟練運用的10個方法

includes

includes 方法確定子字符串是否包含在較大的字符串中并返回 true 或者 false。常用于搜索/解析的字符串是否匹配。

const arrayAuthors = ["DevPoint", "DevelopPoint"];
const author = "DevPoint";
console.log([].includes(author)); // false
console.log(arrayAuthors.includes(author)); // true
console.log([1, 2].includes(author)); // false

toUpperCase

toUpperCase 方法返回一個全部為大寫字母的字符串。

const title = "Develop Point";
console.log(title.toUpperCase()); // DEVELOP POINT

toLocaleLowerCase

toLocaleLowerCase 方法返回一個全部為小寫字母的字符串。

const title = "Develop Point";
console.log(title.toLocaleLowerCase()); // develop point

字符串遍歷

字符串中 length 屬性將返回字符串的長度。通過 .length 屬性來對字符串進行遍歷。

const string = "DevPoint";
for (let i = 0; i < string.length; i++) {
    console.log(string[i]);
}

將可以看到依次輸出 D、d、v、p、 o、 i、 n 、t。

search

使用 search 方法在另一個字符串中搜索一個字符串，它將返回該字符串的索引，這個方法和 indexOf 方法的效果類似。

console.log("DevPoint".search("Point")); // 3
console.log("DevPoint Develop Point".search("e")); // 1
console.log("DevPoint".search("e")); // 1

indexOf

indexOf 方法用于查找字符串的第一個索引，要查找的字符或者字符串多次重復，方法只會返回第一次出現的索引值。

const getStringIndex = (str, searchStr) => str.indexOf(searchStr);

console.log(getStringIndex("DevPoint", "v")); // 2
console.log(getStringIndex("DevPoint Develop Point", "P")); // 3
console.log(getStringIndex("DevPoint Develop Point", "Dev")); // 0
console.log(getStringIndex("DevPoint", "1")); // -1

slice

slice 方法截取字符串的一部分并在新字符串中返回截取的部分。slice，方法接受兩個參數：開始索引和結束索引。結果字符串是這兩個索引之間的切片字符串，但末尾索引處的字符除外。slice 通常用于字符串的截取。

console.log("DevPoint".slice(0, 3)); // Dev
console.log("DevPoint".slice(3, 7)); // Poin，不包含索引為 7 的字母 t

如果沒有提供最后一個索引，slice 將繼續查找直到字符串結束：

console.log("DevPoint".slice(3)); // Point

還可以使用負參數從字符串末尾開始對字符串進行截取，為負數話就是從右邊開始數起。

console.log("DevPoint".slice(-5)); // Point
console.log("DevPoint".slice(-5, -1)); // Poin

replace

replace 方法將字符串中的特定值替換為另一個值。

console.log("DevPoint".replace("Dev", "Develop ")); // Develop Point

concat

concat() 方法連接兩個或多個字符串：

const str1 = "Develop";
const str2 = "Point";
const arrStr = [str1, " ", str2];
console.log(str1.concat(" ", str2)); // Develop Point
console.log("".concat(...arrStr)); // Develop Point

trim

JavaScript 中的 trim() 會刪除字符串兩邊的空格：

const str1 = " Develop ";
console.log(str1.trim()); // Develop

split

split() 方法使用指定的分隔符字符串將一個 String 對象分割成子字符串數組，以一個指定的分割字串來決定每個拆分的位置。

const str = "The split() method takes";

const arrayWorlds = str.split(" ");
console.log(arrayWorlds); // [ 'The', 'split()', 'method', 'takes' ]

lastIndexOf

lastIndexOf 方法返回指定文本在字符串中最后一次出現的索引，與 indexOf 的結果相反（查找的內容存在）：

const getStringLastIndex = (str, searchStr) => str.lastIndexOf(searchStr);

console.log(getStringLastIndex("DevPoint", "v")); // 2
console.log(getStringLastIndex("DevPoint Develop Point", "P")); // 17
console.log(getStringLastIndex("DevPoint Develop Point", "Dev")); // 9
console.log(getStringLastIndex("DevPoint", "1")); // -1

charAt

charAt 方法返回字符串中指定索引或位置處的字符。將前面字符串遍歷使用 charAt 方法來實現，代碼如下：

const string = "DevPoint";
for (let i = 0; i < string.length; i++) {
    console.log(string.charAt(i));
}

charCodeAt

charCodeAt 方法返回 unicode 字符串中指定索引處的字符。返回 0 到 65535 之間的整數，表示給定索引處的 UTF-16 代碼單元。

const title = "Develop Point;";
console.log(title.charCodeAt(0)); // 68
console.log(title.toLocaleLowerCase().charCodeAt(0)); // 100

repeat

repeat 構造并返回一個新字符串，該字符串包含被連接在一起的指定數量的字符串的副本。

const title = "Develop Point;";
console.log(title.repeat(2)); // Develop Point;Develop Point;

match

match 方法檢索返回一個字符串匹配正則表達式的結果。下面的示例在字符串中搜索所有大寫字母。它返回與正則表達式匹配的值的字符串數組。

const title = "Develop Point;";
const regex = /[A-Z]/g;
console.log(title.match(regex)); // [ 'D', 'P' ]

matchAll

matchAll 方法返回一個包含所有匹配正則表達式的結果及分組捕獲組的迭代器。它不會創建一個包含所有匹配項的單個數組，而是創建一個迭代器。 和 match 相比，主要的區別是返回值的區別，而參數有細微的區別（參數 RegExp 必須是設置了全局模式 g 的形式，否則會拋出異常 TypeError）。

const title = "Develop Point;";
const regex = /[A-Z]/g;
const result = title.matchAll(regex);
console.log(result); // Object [RegExp String Iterator] {}

console.log([...result]);
// [
//   [ 'D', index: 0, input: 'Develop Point;', groups: undefined ],
//   [ 'P', index: 8, input: 'Develop Point;', groups: undefined ]
// ]

總結

JavaScript 中的字符串方法非常有用，了解它們也很重要，作為前端開發人員，很多時候會發現自己在使用它們。