從新認識JavaScript（二）

上一篇：從新認識JavaScript（一）

上一篇文章中，着重瞭解了JavaScript中變量的知識，並詳細解釋了var與let之間的差別。這一篇，將對數字與字符串類型作一個介紹。

數字類型

在編程中，即使是咱們最熟悉的十進制數，也比想象中複雜的多。一般會使用不一樣的術語來描述不一樣類型的十進制數。例如：

整數

就是整數，例如10，87，-36等。

浮點數

有小數點或者小數位，例如2.0和3.1415926。

雙精度浮點數

是一種特定類型的浮點數，具備比標準符點數更高的精度（意味着比標準浮點數能精確到更大的小數位數）。

甚至還有不一樣類型的數字系統。十進制是基數10（意味着每列使用0-9），但JavaScript中還有這樣的東西：

二進制

計算機最基礎的語言：0和1。

八進制

基數8，每列使用0-7。

十六進制

基數16，每列使用0-9，而後是a-f。一般在CSS中設置顏色時，會遇到這些數字。

看上去有些混亂，可是與C/C++，Java這些語言不一樣，JavaScript中只有一個數據類型Number。這意味着，在JavaScript中，能夠用相同的方式處理任何類型的數字。

let myInt = 10;
let myFloat = 3.14;

typeof myInt === 'number'
// => true
typeof myFloat === 'number'
// => true
複製代碼

運算符

算數運算符

算數運算符是處理數字的基本運算符。

運算符	名稱	做用	示例
+	加法	兩個數相加	1 + 1
-	減法	用左邊的數減去右邊的數	2 - 1
*	乘法	兩個數相乘	3 * 3
/	除法	用右邊的數除以左邊的數	10 / 2
%	取餘	在將左邊的數分紅同右邊的數相等的若干部分後，取剩下的餘數	11 % 3（返回2）
**	冪	取底數的指數次方，在ES2016中首次引入	3 ** 3（返回27）

注：使用**與使用Math.pow()方法有相似的做用。好比Math.pow(5, 3)中，5是基數，3是指數，至關於5 ** 3。

運算符優先級

先來看一個例子：

let result = 8 + 2 * 10 - 5;
複製代碼

按照傳統的理解，這裏的結果是23，而不是其餘的數字。

這其中的緣由就是運算符優先級：一些運算符將在計算總和的結果時被應用於其餘運算符。這與在學校所學的數學相同，乘法和除法老是先完成，而後是加法和減法。

若是要覆蓋運算符優先級，能夠對要顯示處理的部分加括號，即：

let result = (8 + 2) * (10 - 5);
// => 50
複製代碼

遞增遞減運算符

有時候，須要反覆添加或從數字變量中減去1。這能夠方便的使用遞增++ 和遞減--運算符來完成。

它們最多見於循環之中，後面會詳細介紹。

須要注意的是，遞增和遞減運算符不能直接應用一個數字。緣由是經過遞增遞減運算符，爲變量賦於一個新的更新值，而不是對該值直接進行操做。例如：

let num = 7;
num++;
// => 8
num--;
// => 7
複製代碼

另外，還有一個須要注意的地方。遞增遞減運算符在變量左側時與在變量右側時，同一行代碼中有些許的區別。

let num1 = 7;
console.log(num1++);
// => 7

let num2 = 7;
console.log(++num2);
// => 8

let num3 = 7;
num3++;
console.log(num3);
// => 8
複製代碼

能夠看出，同一行中遞增遞減運算符在執行賦值與返回操做時，不一樣的位置有不一樣的順序。在變量左側時，先進行賦值再返回結果；在變量右側時，先返回結果再進行賦值。

而不一樣行中，變量中存儲的都是計算後的數值。

賦值運算符

賦值運算符是向變量分配值的運算符。在以前的例子中使用了不少次的=就是最基本的一個，它將右邊的賦值給左邊的變量。

還有一些更加複雜的類型，它們提供了有用的快捷方式，可使代碼更簡潔和高效。

運算符	名稱	做用	示例	等價於
+=	遞增賦值	右邊的數值加上左邊的變量，而後返回新的變量	x = 3;x += 4	x = 3;x = x + 4;
-=	遞減賦值	左邊的變量減去右邊的數值，而後返回新的變量	x = 6;x -= 3;	x = 6;x = x - 3;
*=	乘法賦值	左邊的變量除以右邊的數值，而後返回新的變量	x = 2;x *= 3	x = 2;x = x * 3;
/=	除法賦值	左邊的變量除以右邊的數值，而後返回新的變量	x = 10;x /= 5;	x = 10;x = x / 5;

請注意，還能夠在每一個表達式右側使用其餘變量，例如：

let num1 = 3;
let num2 = 4;
num1 += num2;
// => 7
複製代碼

比較運算符

有時候，在程序中會須要真/假測試，而後根據測試的結果進行相應的操做。爲此，使用比較運算符。

運算符	名稱	做用	示例
===	嚴格等於	測試左右值是否相同	5 === 2 + 4
!==	嚴格不等於	測試左右值是否不相同	5 !== 3 + 3
<	小於	測試左值是否小於右值	10 < 6
>	大於	測試左值是否大於右值	10 > 20
<=	小於或等於	測試左值是否小於或等於右值	3 <= 2
>=	大於或等於	測試左值是否大於或等於右值	5 >= 4

在程序中，可能會看到使用==和!=來判斷相等和不想等，這些都是JavaScript中的有效運算符。與===和!==不一樣的是，前者測試值是否相同，但數據類型可能不一樣，後者測試值和數據類型是否都相同。嚴格版本每每致使更少的錯誤，這裏建議在代碼中使用更嚴格的版本。

另外，若是一個變量的值是NaN，那麼不建議用比較運算符來測試結果，例如：

console.log(NaN === NaN);
// => false
複製代碼

而是用：

console.log(isNaN(NaN));
// => true
複製代碼

還有一種狀況，用===或!==可能沒法得出想要的結果，例如：

let num1 = 0.43;
let num2 = 0.1 + 0.33;
console.log(num1 === num2);
// => false
複製代碼

出現這種問題，是由於JavaScript在計算數字運算時，出現了精度丟失。這裏有一個簡單的方法，就是使用toFixed()來舍入後面的數字：

console.log(num1 === num2.toFixed(2));
// => true
複製代碼

字符串

接下來，把注意力轉向文本片斷，也就是字符串。

基本知識

字符串與數字的處理方式第一眼看上去十分類似，可是深刻挖掘時，將會看到一些顯著的差別。

建立一個字符串

let str = 'Hello World.';
複製代碼

就像處理數字同樣，聲明一個變量，用一個字符串值初始化它，而後返回值。惟一的區別是，在編寫字符串時，須要加上引號。

單引號和雙引號

在JavaScript中，能夠選擇使用單引號或者雙引號來包裹字符串。

let str1 = 'Hello World.';
let str2 = "Hello.";
複製代碼

這兩種方式幾乎沒有什麼區別，只是根據我的喜愛來使用。可是，在項目中應該選擇一個並堅持使用，不一致的引號混用代碼可能會引發混亂，特別是在同一個字符串中使用不一樣的引號，例如：

let str = 'Hello World.";
複製代碼

這將引起一個錯誤。瀏覽器會認爲字符串沒有被關閉，由於在字符串中使用了不用的引號。下面這種狀況是正確的：

let str = 'Hello "World".';
複製代碼

可是，不能在字符串中使用包含的引號：

let str = 'Hello 'World'.';
複製代碼

由於它會混淆字符串結束的位置。

轉義字符串中的字符

要修復前面遇到的問題代碼，避免相同引號的混淆字符串結束位置的問題，這裏引入了轉移字符串\\。轉義字符串意味着對一個字符作了一些事情，確保它能夠被識別爲文本，而不是代碼的一部分。

let str = 'Hello \'World\'.'
複製代碼

鏈接字符串

鏈接字符串的做用是將若干個字符串鏈接在一塊兒。在JavaScript中使用+操做符。

let str1 = 'Hello ';
let str2 = 'World.';
let str = str1 + str2;
// => Hello World.
複製代碼

變量str的值最終爲"Hello World."。

數字與字符

若是是兩個數字之間使用+操做符，那麼它將會被認爲是一個算數運算符。但若是其中一個是字符串，將會出現下面的結果；

let str1 = '編號';
let str2 = 89757
let str = str1 + str2;
// => 編號89757
複製代碼

每個數字都有一個toString()方法，能夠將數字類型轉換爲字符串類型。相應的，Number對象將把傳遞給它的任何一個東西變成數字：

let num = Number('666');
typeof num;
// => number
複製代碼

即使是這樣：

let num = Number('編號');
typeof num;
// => number
複製代碼

只不過此時，它的值爲NaN。

常見的字符串處理方法

在JavaScript中，一切東西均可以被看成對象。一旦對象成爲字符串類型的實例，就有大量的原型和方法編輯它。

獲取字符串長度

很簡單，能夠輕鬆的使用length屬性：

let str = 'Hello.';
console.log(str.length);
// => 6
複製代碼

檢索特定字符串字符

可使用方括號表示法返回字符串中的任何字符。

let str = 'Hello.';
console.log(str[0]);
// => H
複製代碼

在字符串中查找子字符串並提取

有時候想要查找一個較小的字符是否存在與一個較大的字符中，可使用indexOf()方法來完成，該方法須要一個參數：想要搜索的字符串。

let str = 'Hello.';
console.log(str.indexOf('ell'));
// => 1
複製代碼

若是目標字符串不存在於這個較大的字符串中，則會返回-1。

當知道字符串中子字符串開始的位置，以及想要結束的字符時，slice()方法能夠提取它。

let str = 'Hello World.';
console.log(str.slice(0, 3));
// => Hel
複製代碼

slice()方法須要兩個參數，第一個參數是開始提取的位置，第二個參數是提取結尾字符以後一個字符的位置。另外，若是想要提取從某個位置開始到字符串結尾的全部字符，能夠這麼作：

let str = 'Hello World.';
console.log(str.slice(2));
// => llo World.
複製代碼

轉換大小寫

字符串方法toLowerCase()和toUpperCase()將全部字符串分別轉換爲小寫或大寫。若是要在數據使用以前對字符串規範化，這兩個方法可能很是有用。

let str = 'Hello.';
console.log(str.toLowerCase());
// => hello.
console.log(str.toUpperCase());
// => HELLO.
複製代碼

替換字符串的某部分

可使用replace()方法將字符串中的一個子字符串替換爲另一個子字符串。

有兩個參數：要被替換下的字符串和要被替換上的字符串：

let str = 'Hello World.';
console.log(str.replace('Hello', 'Hi'));
// => Hi World.
複製代碼

須要注意的是，replace()方法其實返回的是一個新的變量，並且並不會對舊的變量作修改，在上面的例子中，str的值仍然是"Hello World."。想要改變這個字符串，須要設置變量的值等於剛纔的結果。

私貨時間

返回被限制在一個區間的數

function clamp (num, lower, upper) {
    return Math.min(Math.max(num, lower), upper);
}
複製代碼

向下取整

function floor (num) {
    return num >> 0;
}
複製代碼

格式化國際化文本

function languageFormat (str) {
    if (str === null || str === undefined || str === '') {
        return;
    }

    let values = Array.prototype.slice.call(arguments);
    values.shift();
    
    let array = str.match(/{\d}/g);
    for (let i = 0; i < array.length; i++) {
        let index = array[i].match(/\d/)[0];
        if (values.length > index) {
            str = str.replace(array[i], values[index]);
        }
    }
    return str;
}

// 使用方法
let expStr = '經驗值：{0}/{1}';
expStr = languageFormat(expStr, 1, 100);
// => 經驗值：1/100
// 其中國際化文本中下標順序與序列化方法中參數順序一致（從第二個參數開始）
複製代碼