接下來我們將把注意力轉向字串——這就是程式設計中調用的文字片段。在本文中，我們將介紹在學習JavaScript時您應該了解所有有關字串的常見事項，例如建立字串，跳脫字串中的引號以及將字串連接在一起。

文字的力量

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

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

字串 — 基礎

先備知識：	基本的電腦素養、對 HTML 與 CSS 有基本的認識、對 JavaScript 有認識。
目標：	熟悉 JavaScript 字串的基礎。

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

Hidden code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScript console</title>
    <style>
      * {
        box-sizing: border-box;
      }

      html {
        background-color: #0C323D;
        color: #809089;
        font-family: monospace;
      }

      body {
        max-width: 700px;
      }

      p {
        margin: 0;
        width: 1%;
        padding: 0 1%;
        font-size: 16px;
        line-height: 1.5;
        float: left;
      }

      .input p {
        margin-right: 1%;
      }

      .output p {
        width: 100%;
      }

      .input input {
        width: 96%;
        float: left;
        border: none;
        font-size: 16px;
        line-height: 1.5;
        font-family: monospace;
        padding: 0;
        background: #0C323D;
        color: #809089;
      }

      div {
        clear: both;
      }

    </style>
  </head>
  <body>


  </body>

  <script>
    var geval = eval;
    function createInput() {
      var inputDiv = document.createElement('div');
      var inputPara = document.createElement('p');
      var inputForm = document.createElement('input');

      inputDiv.setAttribute('class','input');
      inputPara.textContent = '>';
      inputDiv.appendChild(inputPara);
      inputDiv.appendChild(inputForm);
      document.body.appendChild(inputDiv);

      if(document.querySelectorAll('div').length > 1) {
        inputForm.focus();
      }

      inputForm.addEventListener('change', executeCode);
    }

    function executeCode(e) {
      try {
        var result = geval(e.target.value);
      } catch(e) {
        var result = 'error — ' + e.message;
      }

      var outputDiv = document.createElement('div');
      var outputPara = document.createElement('p');

      outputDiv.setAttribute('class','output');
      outputPara.textContent = 'Result: ' + result;
      outputDiv.appendChild(outputPara);
      document.body.appendChild(outputDiv);

      e.target.disabled = true;
      e.target.parentNode.style.opacity = '0.5';

      createInput()
    }

    createInput();

  </script>
</html>

{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

建立字串

單引號與雙引號

字串中的跳脫字元（Escaping characters）

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

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

連接字串（Concatenating strings）

Concatenation in context

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

{{ EmbedLiveSample('Concatenation_in_context', '100%', 50, "", "", "hide-codepen-jsfiddle") }}

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

數字 vs. 字串

模版字符串(Template literals)

另一種你會遇上的字串語法是模版字符串(template literals) (也稱做模版字串 template strings)。這是一種更新的語法提供更彈性、簡單的方式去理解字串。

將標準字串轉變為模版字符串，你需要將引號 (' ', or " ") 換為重音符 (backtick characters (` `) )，接著來看一個簡單的例子:

如果我們想要連接字串，或是將算式的結果包含在裡面，用傳統的字串去寫會很瑣碎且麻煩:

全部一串都只需要包含在一對重音符號裡，不再需要切開、合起一堆字串碎片。
當你想要包含變數或者算式在字串裡時，你只需要將它放在 佔位符 ${ } 裡。

另一個可以注意的點是，如果你想要將傳統字串拆分成多行，你需要加上一個斷行字母, \n

模版字符串保留了程式碼中的斷行方式，所以不再需要使用斷行字母。
這樣也能達到相同的結果:

我們建議你盡可能習慣使用模版字符串。現今流行的瀏覽器都能完好的支援它，只有一個地方你能發現它並不支援外: Internet Explorer。
我們有許多的例子仍然使用目前標準的字串語法，但我們未來將會加入更多模版字符串的應用。

來我們的Template literals 相關頁面看看更多的範例與進階的特色細節。

測試您的技能！

你已到達文章的結尾了，但你能記得最重要的資訊嗎?
在繼續學習之前，你可以找些難一點的測驗，來檢測你有記得這些知識 — Test your skills: Strings. 記住，接下來的文章也需要這些知識，所以你可能想先看看。

結語

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

{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}