《JavaScript和jQuery實戰手冊(原書第2版)》——2.5節操作數據類型和變量
2.5 操作數據類型和變量
在一個變量中存儲數值或字符串這樣的特定信息,通常隻是程序中的第一步。大多數程序還操作數據以得到新的結果。例如,為分數增加一個數值以加分,把訂購的商品的數目乘上商品的價格得到一個總金額,或者在一條通用性的消息末尾添加一個名字來把它個性化,例如,得到“Good to see you again, Igor”。JavaScript提供了各種操作符來修改數據。操作符隻是一個符號或單詞,用來把一個或多個值修改為其他的值。例如,可以使用+符號(加法操作符)把數值相加。對於不同的數據類型,有不同類型的操作符。
2.5.1 基本算術
JavaScript支持基本的算術運算,例如加法、除法、減法等。表2-2展示了基本的算術操作符及其使用方法。

你可能習慣了使用一個×表示乘法(例如4×5),但是在JavaScript中,使用*符號把兩個數相乘。
也可以在算術運算中使用變量。既然變量隻是數值或字符串這樣的值的一個容器,使用變量就等同於使用變量的內容。
var price = 10;
var itemsOrdered = 15;
var totalCost = price * itemsOrdered;
頭兩行代碼創建了兩個變量(price和itemsOrdered),並且在每個變量中存儲了一個值。第三行代碼創建了另一個變量(totalCost),並且把變量price中存儲的值(10)和變量itemsOrdered中存儲的值(15)相乘的結果存儲在其中。在這個例子中,總數(150)存儲在變量totalCost中。
這段示例代碼還展示了變量的有用之處。假設我們編寫一個程序作為一個電子商務Web站點的購物車係統的一部分。在這個程序中,我們需要使用一種特定商品的價格來做各種計算。可以在整個程序中使用實際的價格來編碼(例如,假設商品的價格是10元,那麼,在用到價格的每個地方都輸入10)。然而,如果價格發生變化,我們必須找到使用該價格的每一行代碼並進行修改。另外,通過使用變量,可以在程序開始的某個地方設置產品的價格。隨後,如果價格發生變化,我們隻需要修改定義了產品價格的那一行代碼,就可以在整個程序中更新價格:
var price = 20;
var itemsOrdered = 15;
var totalCost = price * itemsOrdered;
還有很多其他的方法來操作數值(我們將從14.3節開始學習這些方法),但是,你會發現最常用的基本算術操作符都在表2-2中列出了。
2.5.2 操作的順序
如果同時執行幾個數學運算,例如,把幾個數值相加然後把總和乘以10,我們需要記住JavaScript解釋器執行計算的順序。一些操作符比其他的操作符優先級高,因此,它們會先計算。如果不注意的話,這一事實可能會產生不想要的結果。例如:
4 + 5 * 10
我們可能認為這會直接從左向右計算,4+5等9,9 10等於90。事實不是這樣的。實際上先計算乘法,因此,表達式5 * 10等於50,加上4等於54。乘法(符號)和除法(/符號)的優先級高於加法(+)和減法(-)。
要確保數學運算按照想要的方式進行,可以使用圓括號組合運算。例如,把上麵的表達式重寫為下麵這樣:
(4 + 5) * 10
任何在括號中執行的數學運算都首先進行,因此,在這個例子中,4加上5首先計算並得到結果9,然後乘以10。如果你想要讓乘法先進行,顯然,要像下麵這樣編寫代碼:
4 + (5*10);
2.5.3 組合字符串
組合兩個或多個字符串來得到一個單獨的字符串,這是一項常見的編程任務。例如,如果Web頁麵有一個表單,它在一個字段裏收集一個人的名字並且在另一個字段裏收集他的姓氏,我們需要把兩個字段組合起來得到他的完整名字。更進一步,如果想要顯示一條消息讓用戶知道他的表單信息已經提交,我們需要用人的名字和通用性的消息組合起來,得到 “John Smith, thanks for your order.”。
組合字符串的操作叫做連接,並且使用+操作符完成。是的,這和用來把兩個數值相加的+操作符相同,但是,對於字符串,+執行不同的操作。下麵是一個例子:
var firstName = 'John';
var lastName = 'Smith';
var fullName = firstName + lastName;
在上麵代碼段的最後一行中,變量的firstName內容和變量lastName的內容組合(或連接)到一起,兩個字符串直接連接到一起,結果放置到變量fullName中。在這個例子裏,結果字符串是“JohnSmith”,兩個名字之間沒有空格,因為連接隻是把字符串連到一起。在很多情況下(例如這個例子),我們需要在想要組合的字符串之間添加一個空格:
var firstName = 'John';
var lastName = 'Smith';
var fullName = firstName + ' ' + lastName;
上述代碼段的最後一行中的' '是一個單引號後麵跟著一個空格,然後是一個結束單引號。這段代碼隻是一個包含了空格的字符串。在這個例子中,當把這個字符串放置於兩個變量之間的時候,它產生了一個字符串“John Smith”。最後的一個例子也展示了可以一次性組合兩個以上的字符串,在這個例子中,我們組合了3個字符串。
注意: 記住,變量隻是一個容器,它能夠保存任何類型的數據,例如,一個字符串或一個數值。因此,當你組合兩個字符串變量的時候(firstName + lastName),這和將兩個字符串連接起來(‘John’ + ‘Smith’)是一樣的。
2.5.4 組合數值和字符串
大多數算術操作符僅對數值有意義。例如,把2和字符串'eggs'相乘沒有任何意義。如果嚐試這個例子,最終將得到一個特殊的JavaScript值NaN,它表示“不是一個數值”。然而,有的時候,我們可能想要把一個字符串和數值組合起來。例如,假設我們想要在Web頁麵上顯示一條消息,指出訪問者已經訪問Web站點多少次。他訪問的次數是一個數值,但是,這條消息是一個字符串。在這種情況下,我們使用+操作符來做兩件事情:把一個數值轉換為一個字符串,並且將它和另一個字符串組合起來。下麵是一個例子:
var numOfVisits = 101;
var message = 'You have visited this site ' + numOfVisits + ' times.';
在這個例子中,message包含了字符串“You have visited this site 101 times”。JavaScript解釋器認出了這其中包含了一個字符串,因此,它意識到,這不是要做任何數學運算(不是加法)。相反,它把+當做連接操作符,並且同時意識到這個數值也應該轉換為一個字符串。
這個例子似乎是在同一條消息裏顯示文字和數值的一種好方法。在這個例子中,數值顯然是組成完整句子的一連串字母的一部分,並且,無論何時對一個字符串值和一個數值使用+操作符,JavaScript解釋器都會把數值轉換為一個字符串。
這種功能叫做自動類型轉換,然而,它可能會引發問題。例如,如果訪問者在表單上通過輸入數值(例如2)來回答一個問題(“你想要多少雙鞋”),輸入值被當做一個字符串'2'。那麼,你會遇到這樣一種情況:
var numOfShoes = '2';
var numOfSocks = 4;
var totalItems = numOfShoes + numOfSocks;
我們期待totalItems中存儲的結果是6(兩雙鞋+4雙襪子)。相反,由於numOfShoes中的值是一個字符串,JavaScript解釋器把變量numOfSocks中的值也轉換為一個字符串,並且,我們最終在變量totalItems中得到了字符串'24'。有幾種方法可以防止這種錯誤:
首先,把+添加到包含數值的字符串的開始,例如:
var numOfShoes = '2';
var numOfSocks = 4;
var totalItems = +numOfShoes + numOfSocks;
在一個變量的前麵添加+符號(確保變量和+符號之間沒有空格),這就告訴JavaScript解釋器嚐試把字符串轉換為數值,如果字符串像'2'一樣隻包含數值,我們最終把這個字符串轉換成了一個數值。在這個例子中,我們最終得到6(2 + 4)。另一種技術是使用Number()命令,如下所示:
var numOfShoes = '2';
var numOfSocks = 4;
var totalItems = Number(numOfShoes) + numOfSocks;
Number()在可能的情況下把一個字符串轉換為數值(如果字符串隻是字母且不是數值,我們會得到一個NaN值,表示不能把字母轉換為一個數值)。
通常,在獲取頁麵訪問者的輸入時最常遇到作為字符串的數值,例如,獲取訪問者輸入一個表單字段中的值。因此,如果你需要使用一個表單的輸入或訪問者輸入的其他信息來做加法運算,確保首先對它使用Number()命令。
注意:隻有在將一個數值和包含數值的一個字符串相加的時候,才會發生這個問題。如果你試圖將變量numOfShoes和包含數值的一個變量(例如,shoePrice)相乘,JavaScript解釋器將會把numOfShoes中的字符串轉換為一個數值,然後將其與變量shoePrice相乘。
2.5.5 修改變量中的值
變量很有用,因為它們可以存儲隨著程序運行而變化的值,例如,隨著遊戲的進行而改變的分數。那麼,我們怎麼修改變量的值呢?如果想要替換一個變量中的值,就給該變量賦一個新值。例如:
var score = 0;
score = 100;
然而,我們通常想要保持變量中的值,並且隻是以某種方式給它添加些東西或者改變它。例如,對於一個遊戲分數,我們不想隻是給一個新的分數,總是想從當前分數中增加或減去一個值。要增加變量的值,可以使用這個變量的名字作為操作的一部分,如下所示:
var score = 0;
score = score + 100;
最後一行代碼乍看上去有些令人混淆,但是,它使用了一種非常常見的技術。它是這麼工作的:=號右邊的所有操作首先進行,即score + 100部分先執行。翻譯過來,它的含義是“取出score中當前存儲的值(0)並且給它加上100”。這個操作的結果隨後又存儲回變量score中。這兩行代碼的最終結果是,變量score現在擁有了值100。
同樣的邏輯也適用於其他的算術操作符,例如減法、除法或乘法:
score = score - 10;
score = score * 10;
score = score / 10;
實際上,對一個變量中的值執行數學運算,然後把結果存儲回該變量非常簡單, 4種主要的運算都有快捷方式來完成這一操作,參見表2-3。
![image](https://yqfile.alicdn.com/9b8d08e58c190453d027b2165ae9a938be429561.png" >
最後更新:2017-08-17 11:02:17