處理文字 - JavaScript 中的字串

文字對人類來說非常重要——它們是我們交流的重要組成部分。由於 Web 主要是基於文字的媒介，旨在讓人們進行交流和共享資訊，因此我們可以控制 Web 上顯示的文字很有用。HTML 為文字提供結構和意義，CSS 允許我們精確地設定樣式，而 JavaScript 提供了許多用於操作字串的功能。這些包括建立自定義歡迎訊息和提示、在需要時顯示正確的文字標籤、將術語按所需順序排序等等。

到目前為止，我們向您展示的幾乎所有程式都涉及一些字串操作。

乍一看，字串與數字的處理方式類似，但深入研究後，您會發現一些顯著的差異。讓我們先在 瀏覽器開發者控制檯 中輸入一些基本行，以便熟悉它們。

首先，輸入以下行

const string = "The revolution will not be televised.";
console.log(string);

就像我們對數字所做的那樣，我們聲明瞭一個變數，用字串值初始化它，然後返回該值。這裡唯一的區別是，在編寫字串時，需要用引號將值括起來。

如果您沒有這樣做，或者錯過了其中一個引號，您將收到錯誤。嘗試輸入以下行

const badString1 = This is a test;
const badString2 = 'This is a test;
const badString3 = This is a test';

這些行無法正常工作，因為任何沒有引號包圍的文字都會被解釋為變數名、屬性名、保留字或類似的東西。如果瀏覽器無法識別未加引號的文字，則會引發錯誤（例如，“語句前缺少分號”）。如果瀏覽器能夠檢測到字串的開始位置，但無法檢測到它的結束位置（由於缺少第二個引號），它會報告“未終止的字串文字”錯誤。如果您的程式引發了此類錯誤，請返回並檢查所有字串，確保您沒有遺漏引號。

如果您之前定義了變數 string，則以下程式碼將起作用——現在嘗試一下

const badString = string;
console.log(badString);

badString 現在被設定為與 string 具有相同的值。

在 JavaScript 中，您可以選擇單引號 (')、雙引號 (") 或反引號 (`) 來包圍您的字串。以下所有程式碼都將起作用

const single = 'Single quotes';
const double = "Double quotes";
const backtick = `Backtick`;

console.log(single);
console.log(double);
console.log(backtick);

您必須對字串的開頭和結尾使用相同的字元，否則您將收到錯誤

const badQuotes = 'This is not allowed!";

使用單引號宣告的字串和使用雙引號宣告的字串是相同的，您使用哪一個取決於個人喜好——儘管最好選擇一種風格並在程式碼中始終如一地使用它。

使用反引號宣告的字串是一種特殊的字串，稱為 模板字面量。在大多數情況下，模板字面量與普通字串類似，但它們有一些特殊的屬性

• 您可以在其中 嵌入 JavaScript
• 您可以將模板字面量宣告為 多行

在模板字面量內部，您可以將 JavaScript 變數或表示式包含在 ${ } 中，結果將包含在字串中

const name = "Chris";
const greeting = `Hello, ${name}`;
console.log(greeting); // "Hello, Chris"

您可以使用相同的技術來連線兩個變數

const one = "Hello, ";
const two = "how are you?";
const joined = `${one}${two}`;
console.log(joined); // "Hello, how are you?"

像這樣連線字串稱為連線。

讓我們看一看連線在實際中的使用情況

<button>Press me</button>
<div id="greeting"></div>

const button = document.querySelector("button");

function greet() {
  const name = prompt("What is your name?");
  const greeting = document.querySelector("#greeting");
  greeting.textContent = `Hello ${name}, nice to see you!`;
}

button.addEventListener("click", greet);

在這裡，我們使用的是 window.prompt() 函式，該函式會提示使用者透過彈出對話方塊回答問題，然後將他們輸入的文字儲存在一個給定的變數中——在本例中是 name。然後，我們顯示一個字串，將名稱插入通用問候訊息中。

您只能在模板字面量中使用 ${}，而不能在普通字串中使用。您可以使用 + 運算子連線普通字串

const greeting = "Hello";
const name = "Chris";
console.log(greeting + ", " + name); // "Hello, Chris"

但是，模板字面量通常可以讓您獲得更易讀的程式碼

const greeting = "Hello";
const name = "Chris";
console.log(`${greeting}, ${name}`); // "Hello, Chris"

您可以在模板字面量中包含 JavaScript 表示式，以及變數，結果將包含在結果中

const song = "Fight the Youth";
const score = 9;
const highestScore = 10;
const output = `I like the song ${song}. I gave it a score of ${
  (score / highestScore) * 100
}%.`;
console.log(output); // "I like the song Fight the Youth. I gave it a score of 90%."

模板字面量會保留原始碼中的換行符，因此您可以像這樣編寫跨越多行的字串

const newline = `One day you finally knew
what you had to do, and began,`;
console.log(newline);

/*
One day you finally knew
what you had to do, and began,
*/

要使用普通字串獲得等效的輸出，您需要在字串中包含換行符 (\n)

const newline = "One day you finally knew\nwhat you had to do, and began,";
console.log(newline);

/*
One day you finally knew
what you had to do, and began,
*/

請參閱我們的 模板字面量 參考頁面，以獲取更多示例和高階功能的詳細資訊。

由於我們使用引號來表示字串的開頭和結尾，那麼我們如何在字串中包含實際的引號呢？我們知道這行不通

const badQuotes = "She said "I think so!"";

一種常見的選擇是使用其他字元來宣告字串

const goodQuotes1 = 'She said "I think so!"';
const goodQuotes2 = `She said "I'm not going in there!"`;

另一種選擇是轉義有問題的引號。跳脫字元意味著我們對它們做一些操作，以確保它們被識別為文字，而不是程式碼的一部分。在 JavaScript 中，我們透過在字元前面加上反斜槓來做到這一點。嘗試以下程式碼

const bigmouth = 'I\'ve got no right to take my place…';
console.log(bigmouth);

您可以使用相同的技術來插入其他特殊字元。請參閱 轉義序列，以獲取更多詳細資訊。

當我們嘗試連線字串和數字時會發生什麼？讓我們在控制檯中試一試

const name = "Front ";
const number = 242;
console.log(name + number); // "Front 242"

您可能期望這會返回一個錯誤，但它可以正常工作。數字應該如何顯示為字串是相當明確的，因此瀏覽器會自動將數字轉換為字串，並將兩個字串連線起來。

如果您有一個要轉換為字串的數字變數，或者一個要轉換為數字的字串變數，您可以使用以下兩種結構

• Number() 函式會盡力將傳遞給它的任何內容轉換為數字。嘗試以下程式碼
  js

  const myString = "123";
  const myNum = Number(myString);
  console.log(typeof myNum);
  // number
  

• 相反，String() 函式會將其引數轉換為字串。嘗試以下程式碼
  js

  const myNum2 = 123;
  const myString2 = String(myNum2);
  console.log(typeof myString2);
  // string
  

這些結構在某些情況下非常有用。例如，如果使用者在表單的文字欄位中輸入一個數字，則它是一個字串。但是，如果您想將此數字加到其他內容，則需要將其變為數字，因此您可以將其傳遞給 Number() 來處理它。我們在 數字猜謎遊戲 的 checkGuess 函式中做了完全相同的操作。

因此，這就是 JavaScript 中字串的基礎知識。在下一篇文章中，我們將在此基礎上進行構建，研究 JavaScript 中可用於字串的一些內建方法，以及如何使用它們將字串操作為我們想要的格式。

• 上一步
• 概述：JavaScript 入門
• 下一步