正在翻譯中。

接下來我們將把注意力轉向字符串 - 這就是在編程中調用的文本片段。 在本文中,我們將介紹在學習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

Let's have a look at concatenation being used in action — here's an example from earlier in the course:

<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!');
}

Here we're using a window.prompt() function in line 4, which asks the user to answer a question via a popup dialog box then stores the text they enter inside a given variable — in this case name. We then use an window.alert() function in line 5 to display another popup containing a string we've assembled from two string literals and the name variable, via concatenation.

Numbers vs. strings

  1. So what happens when we try to add (or concatenate) a string and a number? Let's try it in our console:
    'Front ' + 242;
    
    You might expect this to throw an error,  but it works just fine. Trying to represent a string as a number doesn't really make sense, but representing a number as a string does, so the browser rather cleverly converts the number to a string and concatenates the two strings together.
  2. You can even do this with two numbers — you can force a number to become a string by wrapping it in quote marks. Try the following (we are using the typeof operator to check whether the variable is a number or a string):
    var myDate = '19' + '67';
    typeof myDate;
  3. If you have a numeric variable that you want to convert to a string but not change otherwise, or a string variable that you want to convert to a number but not change otherwise, you can use the following two constructs:
    • The Number object will convert anything passed to it into a number, if it can. Try the following:
      var myString = '123';
      var myNum = Number(myString);
      typeof myNum;
    • On the other hand, every number has a method called toString() that will convert it to the equivalent string. Try this:
      var myNum = 123;
      var myString = myNum.toString();
      typeof myString;
    These constructs can be really useful in some situations. For example, if a user enters a number into a form text field, it will be a string. However, if you want to add this number to something, you'll need it to be a number, so you could pass it through Number() to handle this. We did exactly this in our Number Guessing Game, in line 61.

Conclusion

So that's the very basics of strings covered in JavaScript. In the next article we'll build on this, looking at some of the built-in methods available to strings in JavaScript and how we can use them to manipulate our strings into just the form we want.

 

In this module

 

文件標籤與貢獻者

此頁面的貢獻者: lebniz, jackblackevo, mdnwebdocs-bot, mubiesam
最近更新: lebniz,