1. 教程
  2. JavaScript 教程
  3. JavaScript 字串

JavaScript 字串

Created: October-14, 2018

在本教程中，你將學習如何在 JavaScript 中建立和操作字串。

JavaScript 中的 String 是什麼

字串是一系列字母、數字、特殊字元和算術值或所有組合。可以通過將字串文字（即字串字元）括在單引號（'）或雙引號（"）中來建立字串，如下例所示：

var myString = 'Hello World!'; // Single quoted string
var myString = "Hello World!"; // Double quoted string

你可以在字串中使用引號，只要它們與字串周圍的引號不匹配：

var str1 = "it's okay";
var str2 = 'He said "Goodbye"';
var str3 = "She replied 'Calm down, please'";
var str4 = 'Hi, there!"; // Syntax error - quotes must match

但是，你仍然可以在單引號字串中使用單引號或在雙引號字串中使用雙引號，方法是使用反斜槓字元（\） 轉義引號，如下所示：

var str1 = 'it\'s okay';
var str2 = "He said \"Goodbye\"";
var str3 = 'She replied \'Calm down, please\'';

反斜槓（\）被呼叫轉義字元，而序列 \' 和 \" ，我們已經在上面的例子中被稱為用於轉義序列。

JavaScript 轉義序列

轉義序列對於你想要使用無法使用鍵盤輸入的字元的情況也很有用。以下是一些其他最常用的轉義序列。

  • \n 由換行符替換
  • \t 由製表符替換
  • \r 由回車符替換
  • \b 由退格符替換
  • \\ 被一個反斜槓替換（\）

這是一個澄清轉義序列實際工作原理的例子：

var str1 = "The quick brown fox \n jumps over the lazy dog.";
document.write("<pre>" + str1 + "</pre>"); // Create line break
 
var str2 = "C:\Users\Downloads";
document.write(str2); // Prints C:UsersDownloads
 
var str3 = "C:\\Users\\Downloads";
document.write(str3); // Prints C:\Users\Downloads

對字串執行操作

JavaScript 提供了幾個屬性和方法來對字串值執行操作。從技術上講，只有物件可以具有屬性和方法。但是在 JavaScript 中，當你使用屬性訪問表示法（即點表示法）引用它們時，原始資料型別可以像物件一樣。

JavaScript 通過為原始資料型別建立臨時包裝器物件使其成為可能。此過程由 JavaScript 直譯器在後臺自動完成。

獲取字串的長度

length 屬性返回字串的長度，即字串中包含的字元數。這包括特殊字元的數量，例如 \t 或 \n 。

var str1 = "This is a paragraph of text.";
document.write(str1.length); // Prints 28
 
var str2 = "This is a \n paragraph of text.";
document.write(str2.length); // Prints 30, because \n is only one character

注意： 既然 length 是屬性，而不是函式，所以不要在它之後使用括號 str.length() 。而只是寫 str.length ，否則會產生錯誤。

在另一個字串中查詢字串

你可以使用 indexOf() 方法在另一個字串中查詢子字串或字串。此方法返回字串中第一次出現的指定字串的索引或位置。

var str = "If the facts don't fit the theory, change the facts.";
var pos = str.indexOf("facts");
alert(pos); // 0utputs: 7

類似地，你可以使用 lastIndexOf() 方法獲取字串中最後一次出現的指定字串的索引或位置，如下所示：

var str = "If the facts don't fit the theory, change the facts.";
var pos = str.lastIndexOf("facts");
alert(pos); // 0utputs: 46

無論是 indexOf() 和 lastIndexOf() 方法返回 -1 ，如果子字串沒有找到的話。兩種方法都接受一個可選的整數引數，該引數指定字串中開始搜尋的位置。這是一個例子：

var str = "If the facts don't fit the theory, change the facts.";
 
// Searching forwards
var pos1 = str.indexOf("facts", 20);
alert(pos1); // 0utputs: 46
 
// Searching backwards
var pos2 = str.lastIndexOf("facts", 20);
alert(pos2); // 0utputs: 7

注意： 字串中的字元從左到右編制索引。第一個字元的索引是 0，名為 myStr 的字串的最後一個字元的索引是 myStr.length - 1。

在字串中搜尋模式

你可以使用 search() 方法搜尋字串中的特定文字或模式。

與 indexOf() 方法一樣，該 search() 方法也返回第一個匹配的索引，如果沒有找到匹配則返回 -1，但與 indexOf() 方法不同，此方法也可以將正規表示式作為其引數來提供高階搜尋功能。

var str = "Color red looks brighter than color blue.";
 
// Case sensitive search
var pos1 = str.search("color");
alert(pos1); // 0utputs: 30
 
// Case insensitive search using regexp
var pos2 = str.search(/color/i);
alert(pos2); // 0utputs: 0

注意： 該 search() 方法不支援全域性搜尋; 它會忽略其正規表示式引數的 g 標誌或修飾符（即 /pattern/g）。

你將在接下來的章節中瞭解有關正規表示式的更多資訊。

從字串中提取子字串

你可以使用 slice() 方法從字串中提取部分或子字串。

此方法需要 2 個引數： start index （開始提取的索引）和可選的 end index （結束提取之前的索引），如 str.slice(startIndex, endIndex) 。

以下示例將字串的一部分從位置 4 切割到位置 15：

var str = "The quick brown fox jumps over the lazy dog.";
var subStr = str.slice(4, 15);
document.write(subStr); // Prints: quick brown

你還可以指定負值。負值被視為 strLength + startIndex ，這裡 strLength 是字串的長度 str.length ，例如，如果 startIndex 是 -5 ，那麼它是作為處理 strLength - 5 。如果 startIndex 大於或等於字串的長度，則 slice() 方法返回一個空字串。此外，如果 endIndex 未指定或省略，則 slice() 方法將提取到字串的末尾。

var str = "The quick brown fox jumps over the lazy dog.";
document.write(str.slice(-28, -19)); // Prints: fox jumps
document.write(str.slice(31)); // Prints: the lazy dog.

你還可以使用該 substring() 方法根據開始和結束索引提取給定字串的一部分，例如 str.substring(startIndex, endIndex) 。該 substring() 方法與 slice() 方法非常相似，只是差異很小：

  • 如果任一引數小於 0 或者是 NaN ，則將其視為 0 。
  • 如果任一引數大於 str.length ，則將其視為是 str.length 。
  • 如果 startIndex 大於 endIndex ，那麼 substring() 將交換這兩個引數; 例如， str.substring(5, 0) == str.substring(0, 5) 。

以下示例將向你展示此方法如何工作：

var str = "The quick brown fox jumps over the lazy dog.";
document.write(str.substring(4, 15)); // Prints: quick brown
document.write(str.substring(9, 0)); // Prints: The quick
document.write(str.substring(-28, -19)); // Prints nothing
document.write(str.substring(31)); // Prints: the lazy dog.

從字串中提取固定數量的字元

JavaScript 也提供 substr() 方法，它類似於 slice() 方法，但是存在細微差別，第二個引數指定要提取的字元數而不是結束索引，如 str.substr(startIndex, length) 。如果 length 是 0 或否數，則返回空字串。以下示例演示了它的工作原理：

var str = "The quick brown fox jumps over the lazy dog.";
document.write(str.substr(4, 15)); // Prints: quick brown fox
document.write(str.substr(-28, -19)); // Prints nothing
document.write(str.substr(-28, 9)); // Prints: fox jumps
document.write(str.substr(31)); // Prints: the lazy dog.

替換字串的內容

你可以使用 replace() 方法將字串的一部分替換為另一個字串。此方法需要兩個引數，一個正規表示式匹配或要替換的子字串和一個替換字串，如 str.replace(regexp|substr, newSubstr) 。

此 replace() 方法返回一個新字串，它不會影響原始字串。以下示例將向你展示它的工作原理：

var str = "Color red looks brighter than color blue.";
var result = str.replace("color", "paint");
alert(result); // 0utputs: Color red looks brighter than paint blue.

預設情況下，該 replace() 方法僅替換第一個匹配項，並且區分大小寫。要以不區分大小寫的方式替換字串中的子字串，可以使用帶有修飾符的正規表示式（regexp） i ，如下例所示：

var str = "Color red looks brighter than color blue.";
var result = str.replace(/color/i, "paint");
alert(result); // 0utputs: paint red looks brighter than color blue.

同樣，要以不區分大小寫的方式替換字串中所有出現的子字串，可以將 g 修飾符與 i 修飾符一起使用，如下所示：

var str = "Color red looks brighter than color blue.";
var result = str.replace(/color/ig, "paint");
alert(result); // 0utputs: paint red looks brighter than paint blue.

將字串轉換為大寫或小寫

你可以使用 toUpperCase() 方法將字串轉換為大寫，如下所示：

var str = "Hello World!";
var result = str.toUpperCase();
document.write(result); // Prints: HELLO WORLD!

同樣，你可以使用 toLowerCase() 將字串轉換為小寫，如下所示：

var str = "Hello World!";
var result = str.toLowerCase();
document.write(result); // Prints: hello world!

連線兩個或多個字串

你可以使用 + 和 += 賦值運算子連線或組合兩個或多個字串。

var hello = "Hello";
var world = "World";
var greet = hello + " " + world;
document.write(greet); // Prints: Hello World
 
var wish  = "Happy";
    wish += " New Year";
document.write(wish); // Prints: Happy New Year

JavaScript 還提供 concat() 了組合字串的方法，但不建議這樣做。

從字串訪問單個字元

你可以使用 charAt() 方法從字串中訪問單個字元，例如 str.charAt(index) 中的 index 應該指定為 0 和 str.length - 1 之間的整數。如果未提供索引，則返回字串中的第一個字元，因為預設值為 0 。

var str = "Hello World!";
document.write(str.charAt());  // Prints: H
document.write(str.charAt(6)); // Prints: W
document.write(str.charAt(30)); // Prints nothing
document.write(str.charAt(str.length - 1)); // Prints: !

有更好的方法來做到這一點。從 ECMAScript 5 開始，字串可以像只讀陣列一樣處理，你可以使用方括號（[]）代替 charAt() 方法從字串中訪問單個字元，如以下示例所示：

var str = "Hello World!";
document.write(str[0]); // Prints: H
document.write(str[6]); // Prints: W
document.write(str[str.length - 1]); // Prints: !
document.write(str[30]); // Prints: undefined

注意： 使用 charAt() 和方括號（[]） 從字串訪問字元之間的唯一區別是，如果沒有找到字元，則 [] 返回 undefined ，而 charAt() 方法返回一個空字串。

將字串拆分為陣列

split() 方法可用於使用語法將字串拆分為字串陣列 str.split(separator, limit) 。 seperator 引數指定需要需要分割的字串，而字串 limit 引數指定陣列的最大長度。

如果 separator 省略引數或在指定的字串中找不到引數，則將整個字串分配給陣列的第一個元素。以下示例顯示了它的工作原理：

var fruitsStr = "Apple, Banana, Mango, Orange, Papaya";
var fruitsArr = fruitsStr.split(", ");
document.write(fruitsArr[0]); // Prints: Apple
document.write(fruitsArr[2]); // Prints: Mango
document.write(fruitsArr[fruitsArr.length - 1]); // Prints: Papaya
 
// Loop through all the elements of the fruits array 
for(var i in fruitsArr) {  
    document.write("<p>" + fruitsArr[i] + "</p>");
}

要將字串拆分為字元陣列，請將空字串（""） 指定為分隔符。

var str = "INTERSTELLAR";
var strArr = str.split("");
document.write(strArr[0]); // Prints: I
document.write(strArr[1]); // Prints: N
document.write(strArr[strArr.length - 1]); // Prints: R
 
// Loop through all the elements of the characters array and print them
for(var i in strArr) {  
    document.write("<br>" + strArr[i]);
}

你將在 JavaScript 迴圈章節詳細瞭解迴圈語句。