處理文本 - JavaScript中的字符串

翻譯不完整。 請幫助我們翻譯這篇文章!

接下來我們將把注意力轉向字符串 - 這就是在編程中調用的文本片段。 在本文中,我們將介紹在學習JavaScript時您應該了解的關於字符串的所有常見事項,例如創建字符串,轉義字符串中的引號以及將字符串連接在一起。

前提條件: 基本的電腦素養,對 HTML 與 CSS 有基本的認識,對 JavaScript 有認識。
目標: 熟悉 JavaScript 字符串的基礎。

文字的力量

文字對人類而言非常重要——它關乎我們如何交流、溝通。Web 以文本為基底的媒介,它的設計讓人類可以進行交流並分享訊息,因此掌握文字如何在 Web 上呈現是很有用的。 HTML 提供文本的結構以及定義; CSS 讓我們更精確地設定樣式;而 JavaScript 則包含許多操作字符串的特性,例如:製作客製化的歡迎訊息、顯示所需且正確的文字標籤、排列所需的詞語順序等。

到目前為止,幾乎所有我們課程上的編碼都包含一些字符串操作。

字符串 — 基礎

剛開始你會覺得字符串與數字的處理方式很類似,但當你越深入就會了解到一些明顯的差異。讓我們從在 console 裡輸入一些基本的程式行來熟悉它吧!在下方,我們提供一個 Console (你也可以另開一個頁籤或視窗使用他 ,或者使用瀏覽器的開發者工具)。

創建一個字符串

  1. 首先,輸入下面程式行:
    var string = 'The revolution will not be televised.';
    string;
    就像我們對數字的操作,我們聲明一個變數,並用一個值(字符串)來初始化他,而後返回這個值。唯一的差異在於,你需要用引號包住你的值。
  2. 如果你沒有使用引號包住值,或者缺少單一邊的引號,都會導致錯誤產生。試著輸入下面的程式行:
    var badString = This is a test;
    var badString = 'This is a test;
    var badString = This is a test';
    上述的程式無法運作,因為任何一個文本缺少引號都將被視為變數名稱、屬性名稱和保留字等。如果瀏覽器無法辨識它,便會產生錯誤(例如:「missing ; before statement」)如果瀏覽器可以識別字段從哪裡開始,但無法找到字段的終點,意即缺少第二個引號,則錯誤「unterminated string literal」也會產生。如果你的程序出現了這樣的錯誤,檢視並確認自己的字符串是否有遺漏任何引號。
  3. 如果你先定義好變數 string ,則程式行可以正常運作。馬上來試試看:
    var badString = string;
    badString;
    badString 會被設定跟 string 具有一樣的值。

單引號與雙引號

  1. 在 JavaScript 中在 JavaScript 中,你可以選擇用單引號或雙引號來包住字串。兩種方式都可行:
    var sgl = 'Single quotes.';
    var dbl = "Double quotes";
    sgl;
    dbl;
  2. 兩種之間的差異非常小,取決於你個人的習慣與喜好。你可以選擇一種,並且固定使用它。交互使用兩種方式,容易造成混亂。特別是當你使用兩種不同的引號包住一個字串!這會導致錯誤回傳:
    var badQuotes = 'What on earth?";
  3. 瀏覽器會認為字符串並沒有結束,沒有作為包住字符串的引號,是可以出現在字符串裡面的。看看下面的例子,兩種都是可行的:
    var sglDbl = 'Would you eat a "fish supper"?';
    var dblSgl = "I'm feeling blue.";
    sglDbl;
    dblSgl;
  4. 但是,字符串中不可以再使用那個作為包住字符串的引號。以下的程式行會出錯,因為瀏覽器無法判斷字符串的結尾:
    var bigmouth = 'I've got no right to take my place...';
    This leads us very nicely into our next subject.

字符串中的逃脫字元(Escaping characters)

修復我們先前的問題程式行,我們需要解決引號的問題。逃脫字元(Escaping characters)的意思是我們需要確保它們被辨識為文本,而非程式碼本身。在 JavaScript 中,我們在字元的前面放一個反斜線解決這個問題。試試看這個:

var bigmouth = 'I\'ve got no right to take my place...';
bigmouth;

這是可行的!你可以用一樣的方法逃脫其他字元,例如 \"。除此之外,還有一些特殊方法。更詳細的部分,請參閱 跳脫符號 。

連接字符串(Concatenating strings)

  1. 連接(Concatenate)是一個新潮的程式用語。在 JavaScript 中,使用加號(+)將字串連接;這也是我們做數字相加的方式。但在這個狀況下,它有不同的作用。讓我們在 console 中做一個範例:
  2. var one = 'Hello, ';
    var two = 'how are you?';
    var joined = one + two;
    joined;
    這邊的結果是 joined  這個變數中,有了 「Hello, how are you?」這個值。
  3. 在上一個範例中,我們只是連接了兩個字符串。但只要你在兩個字符串之間添加 + ,那你要連接幾個都可以。試試看這個:
    var multiple = one + one + one + one + two;
    multiple;
  4. 你也可以結合變數和字串。試試看這個:
    var response = one + 'I am fine — ' + two;
    response;

Note: 當你輸入一個字串在你的程式碼中,並用單引號或雙引號將它括起來,它稱為 字串文字string literal)。

Concatenation in context

讓我們看看實際運用連接字串的例子 — 以下是這堂課中稍早的範例:

<button>Press me</button>
var button = document.querySelector('button');

button.onclick = function() {
  var name = prompt('What is your name?');
  alert('Hello ' + name + ', nice to see you!');
}

在程式第四行我們用了 window.prompt() 這個函式,可以要求使用者透過彈出的對話框去回答問題,並將使用者輸入的文字儲存在給訂的變數內(在這個例子中就是 name)。接著我們在第五行用了 window.alert() 函式,顯示另一個彈出視窗,以連接的方式將兩段字串文字以及 name 這個變數結合成一個字串。

數字 vs. 字串

  1. 那麼我們將字串和數字連接會發生什麼事呢?讓我們在console中試試看:
    'Front ' + 242;
    
    或許你預期會跑出錯誤訊息,但看來依然正常運作。若將字串表示成數字似乎不太合理,但將數字表示成字串看來是可行的,所以瀏覽器便會巧妙地將數字轉換成字串,並將這兩個字串連接在一起。
  2. 你也可以用兩個數字做這個例子 — 將這兩個數字包在引號中強制將它們轉換成字串。試試看(並使用typeof這個運算子去檢查變數是數字或字串):
    var myDate = '19' + '67';
    typeof myDate;
  3. 如果你想轉換數字變數成字串,但不要更動到原本的變數;或是想轉換字串變數成數字,也不要更動到原本的變數,你可以使用以下兩種方式:
    • 物件 Number 會將欲處理的變數轉換成數字(如果可行的話)。試試以下例子:
      var myString = '123';
      var myNum = Number(myString);
      typeof myNum;
    • 另一方面,也有 toString() 方法能夠讓數字轉換為相等的字串。試試看:
      var myNum = 123;
      var myString = myNum.toString();
      typeof myString;
    這些結構在某些情況相當好用。舉例來說:如果使用者在文字表單中輸入了一個數字,這個數字將會是字串格式。而若想要把這個數字加上另一個數字,那你會希望它是數字格式(才能做數字相加),所以可以使用 Number() 來處理這個情況。可以看看實際案例: Number Guessing Game, in line 61.

結語

以上是JavaScript中基礎的字串觀念。下個文章中,我們會依循這些概念並試試一些適用於字串的內建方法,進而運用這些方法讓字串能照我們想要的方式呈現。

In this module