从新认识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
// 其中国际化文本中下标顺序与序列化方法中参数顺序一致（从第二个参数开始）
复制代码