文字處理——JavaScript 中的字串

詞語的力量

文字對人類非常重要——它們是我們溝通的很大一部分。由於網路是一種主要基於文字的媒介，旨在允許人類交流和共享資訊，因此控制出現在網路上的文字對我們很有用。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';

這些行無效，因為任何沒有引號的文字都被解釋為變數名、屬性名、保留字或類似的東西。如果瀏覽器無法識別未加引號的文字，則會引發錯誤（例如，“missing; before statement”）。如果瀏覽器能夠檢測到字串的開頭但無法檢測到其結尾（因為缺少第二個引號），它可能會報告“unterminated string literal”錯誤，或者在控制檯中跳到新行並期望您在那裡完成字串。如果您的程式引發了此類錯誤，請返回並檢查所有字串，確保沒有缺少引號。

如果您之前定義了變數 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

在模板字面量中，你可以將 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 greeting2 = "Hello";
const name2 = "Bob";
console.log(greeting2 + ", " + name2); // "Hello, Bob"

然而，模板字面量通常能讓你的程式碼更具可讀性

const greeting3 = "Howdy";
const name3 = "Ramesh";
console.log(`${greeting3}, ${name3}`); // "Howdy, Ramesh"

在字串中包含表示式

你可以在模板字面量中包含 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 newline2 = "One day you finally knew\nwhat you had to do, and began,";
console.log(newline2);

/*
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 coolBandName = "Front ";
const number = 242;
console.log(coolBandName + 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 進行動態指令碼編寫
• 下一頁