什么是原始值包装类型

为了方便操作原始值，ECMAScript提供了三种特殊的引用类型：Boolean，Number和String。每当应用某个原始值的方法或属性时，后台都会创建一个响应原始包装类型的对象，从而暴露出操作原始值的各种方法。例如：

let s1 = "some text";

let s2 = s1.substring(2);

上述例子中，定义了s1后再通过substring截取s1的值并赋予了s2，但是原始值本身不是对象，逻辑上不应该有方法，但是这个例子又能正常运行，这是因为后台操作中进行了处理，一般来讲是以下三个步骤：

创建一个String类型实例；
调用实例上的特定方法；
销毁实例；

let s1 = new String("some text");

let s2 = s1.substring(2);

s1 = null;

上述行为可以让原始值拥有对象的行为，对于布尔值和数值而言，以上三步也会在后台发生，只不过使用的包装类型不同。

引用类型与原始值包装类型的主要区别在于对生命周期。在通过 new 实例化引用类型后，得到的实例会在离开作用域时被销毁，而自动创建的原始值包装对象则只存在于访问它的那行代码执行期间。这意味着不能在运行时给原始值添加属性和方法。例如：

let s1 = "some";

s1.color = "red";

console.log(s1.color); // undefined

这里的第二行代码尝试给字符串 s1 添加了一个 color 属性。可是，第三行代码访问 color 属性时，它却不见了。原因就是第二行代码运行时会临时创建一个 String 对象，而当第三行代码执行时，这个对象已经被销毁了。实际上，第三行代码在这里创建了自己的 String 对象，但这个对象没有 color 属性。

虽然可以显式的使用包装对象，不过没有必要，并且typeof包装类型会返回object。

如果传给 Object 的是字符串，则会创建一个 String 的实例。如果是数值，则会创建 Number 的实例。布尔值则会得到 Boolean 的实例。

let obj = new Object("some text");

console.log(obj instanceof String); // true

let value = "25";

let number = Number(value); // 转型函数

console.log(typeof number); // "number"

let obj = new Number(value); // 构造函数

console.log(typeof obj); // "object"

Boolean

Boolean 是对应布尔值的引用类型。要创建一个 Boolean 对象，就使用 Boolean 构造函数并传入true 或 false。Boolean 的实例会重写 valueOf()方法，返回一个原始值 true 或 false。toString()方法被调用时也会被覆盖，返回字符串"true"或"false"。不过，Boolean 对象在 ECMAScript 中用得很少。不仅如此，它们还容易引起误会，尤其是在布尔表达式中使用 Boolean 对象时。

let falseObject = new Boolean(false);

let result = falseObject && true;

console.log(result); // true 虽然Boolean引用类型的值为false，但是所有对象在布尔表达式中都会自动转换为 true

let falseValue = false;

result = falseValue && true;

console.log(result); // false

console.log(typeof falseObject); // object

console.log(typeof falseValue); // boolean

console.log(falseObject instanceof Boolean); // true

console.log(falseValue instanceof Boolean); // false

Number

Number 是对应数值的引用类型。要创建一个 Number 对象，就使用 Number 构造函数并传入一个数值。与 Boolean 类型一样，Number 类型重写了 valueOf()、toLocaleString()和 toString()方法。valueOf()方法返回 Number 对象表示的原始数值，另外两个方法返回数值字符串。

let num = 10;

console.log(num.toString()); // "10"

console.log(num.toString(2)); // "1010"

console.log(num.toString(8)); // "12"

console.log(num.toString(10)); // "10"

console.log(num.toString(16)); // "a"

除了继承的方法，Number类型提供了几个用于数值格式化为字符串的方法。

toFixed()方法返回指定小数点的数值字符串

let num = 10;

console.log(num.toFixed(2)); // "10.00" 如果小数位超过2则会四舍五入

toExponential()返回科学计数法表示的数值字符串

let num = 10;

console.log(num.toExponential(1)); // "1.0e+1"

toPrecision()方法会根据情况返回最合理的输出结果

let num = 99;

console.log(num.toPrecision(1)); // "1e+2"

console.log(num.toPrecision(2)); // "99"

console.log(num.toPrecision(3)); // "99.0"

isInteger()用于辨别一个数值是否保存为整数，有时候小数位的0可能会让人误会。

console.log(Number.isInteger(1)); // true

console.log(Number.isInteger(1.00)); // true

console.log(Number.isInteger(1.01)); // false

与 Boolean 对象类似，Number 对象也为数值提供了重要能力。但是，考虑到两者存在同样的潜在问题，因此并不建议直接实例化 Number 对象。在处理原始数值和引用数值时，typeof 和 instacnceof操作符会返回不同的结果。

let numberObject = new Number(10);

let numberValue = 10;

console.log(typeof numberObject); // "object"

console.log(typeof numberValue); // "number"

console.log(numberObject instanceof Number); // true

console.log(numberValue instanceof Number); // false

String

String是对应数值的引用类型。要创建一个 String 对象，就使用 String构造函数并传入一个数值，String 对象的方法可以在所有字符串原始值上调用。3个继承的方法 valueOf()、toLocaleString()和 toString()都返回对象的原始字符串值。

每个String都有length属性，表示字符的数量

let stringValue = "hello world";

console.log(stringValue.length); // "11"

JavaScript字符

charAt()方法返回给定索引位置的字符

let message = "abcde";

console.log(message.charAt(2)); // "c"

charCodeAt()方法可以查看指定码元的字符编码

let message = "abcde";

// Unicode "Latin small letter C"的编码是 U+0063

console.log(message.charCodeAt(2)); // 99

// 十进制 99 等于十六进制 63

console.log(99 === 0x63); // true

fromCharCode()方法用于根据给定的 UTF-16 码元创建字符串中的字符

console.log(String.fromCharCode(0x61, 0x62, 0x63, 0x64, 0x65)); // "abcde"

字符串操作方法

concat()用于将一个或多个字符串拼接成新字符串，并且不影响原字符串可以使用+号代替不会影响原字符串

let stringValue = "hello ";

let result = stringValue.concat("world", "!");

console.log(result); // "hello world!"

console.log(stringValue); // "hello"

slice()、substr()和 substring()都是提取子字符串方法，slice()、substring()第一个参数表示提取开始的位置，第二个参数结束的位置不包括结束位置的字符串，对于substr()第二个参数表示返回的字符串数量。任何情况下省略第二个参数表示提取到字符串末尾。不会影响原字符串。注意substr已被弃用

let stringValue = "hello world";

console.log(stringValue.slice(3)); // "lo world"

console.log(stringValue.substring(3)); // "lo world"

console.log(stringValue.substr(3)); // "lo world"

console.log(stringValue.slice(3, 7)); // "lo w"

console.log(stringValue.substring(3,7)); // "lo w"

console.log(stringValue.substr(3, 7)); // "lo worl"

当某个参数是负值时，这 3 个方法的行为又有不同。比如，slice()方法将所有负值参数都当成字符串长度加上负参数值。而 substr()方法将第一个负参数值当成字符串长度加上该值，将第二个负参数值转换为 0。substring()方法会将所有负参数值都转换为 0。

let stringValue = "hello world";

console.log(stringValue.slice(-3)); // "rld"

console.log(stringValue.substring(-3)); // "hello world"

console.log(stringValue.substr(-3)); // "rld"

console.log(stringValue.slice(3, -4)); // "lo w"

console.log(stringValue.substring(3, -4)); // "hel"

console.log(stringValue.substr(3, -4)); // "" (empty string)

字符串包含方法

startsWith()和 endsWith()都会搜索传入的字符串，如果是以指定的字符串开始或结尾返回true，区别在于startsWith()检查开始于索引 0 的匹配项，endsWith()检查开始于索引(string.length - substring.length)的匹配项。

let message = "foobarbaz";

console.log(message.startsWith("foo")); // true

console.log(message.startsWith("bar")); // false

console.log(message.endsWith("baz")); // true

console.log(message.endsWith("bar")); // false

includes会搜索传入的字符串，与上面的不同的是，它会检查整个字符串。

let message = "foobarbaz";

console.log(message.includes("bar")); // true

console.log(message.includes("qux")); // false

startsWith()和 includes()方法接收可选的第二个参数，表示开始搜索的位置。如果传入第二个参数，则意味着这两个方法会从指定位置向着字符串末尾搜索，忽略该位置之前的所有字符。endsWith()方法接收可选的第二个参数，表示应该当作字符串末尾的位置。如果不提供这个参数，那么默认就是字符串长度。如果提供这个参数，那么就好像字符串只有那么多字符一样。

let message = "foobarbaz";

console.log(message.startsWith("foo")); // true

console.log(message.startsWith("foo", 1)); // false

console.log(message.includes("bar")); // true

console.log(message.includes("bar", 4)); // false

console.log(message.endsWith("bar")); // false

console.log(message.endsWith("bar", 6)); // true

trim()方法

ECMAScript 在所有字符串上都提供了 trim()方法。这个方法会创建字符串的一个副本，删除前、后所有空格符，再返回结果，另外，trimLeft()和 trimRight()方法分别用于从字符串开始和末尾清理空格符。注意不会影响原字符串

let stringValue = " hello world ";

let trimmedStringValue = stringValue.trim();

console.log(stringValue); // " hello world "

console.log(trimmedStringValue); // "hello world"

repeat()方法

ECMAScript 在所有字符串上都提供了 repeat()方法。这个方法接收一个整数参数，表示要将字符串复制多少次，然后返回拼接所有副本后的结果。注意不会影响原字符串

let stringValue = "na ";

console.log(stringValue.repeat(16) + "batman");

// na na na na na na na na na na na na na na na na batman

padStart()和 padEnd()方法

padStart()和 padEnd()方法会复制字符串，如果小于指定长度，则在相应一边填充字符，直至满足长度条件。这两个方法的第一个参数是长度，第二个参数是可选的填充字符串。注意不会影响原字符串

let stringValue = "foo";

console.log(stringValue.padStart(6)); // " foo"

console.log(stringValue.padStart(9, ".")); // "......foo"

console.log(stringValue.padEnd(6)); // "foo "

console.log(stringValue.padEnd(9, ".")); // "foo......"

console.log(stringValue.padStart(8, "bar")); // "barbafoo"

console.log(stringValue.padStart(2)); // "foo"

console.log(stringValue.padEnd(8, "bar")); // "foobarba"

console.log(stringValue.padEnd(2));

字符串迭代与解构

字符串的原型上暴露了一个@@iterator 方法，表示可以迭代字符串的每个字符。有了这个迭代器之后，字符串就可以通过解构操作符来解构了

let message = "abc";

let stringIterator = message[Symbol.iterator]();

console.log(stringIterator.next()); // {value: "a", done: false}

console.log(stringIterator.next()); // {value: "b", done: false}

console.log(stringIterator.next()); // {value: "c", done: false}

console.log(stringIterator.next()); // {value: undefined, done: true}

let message = "abcde";

console.log([...message]); // ["a", "b", "c", "d", "e"]

字符串大小写切换

大小写切换包括toLowerCase()，toLocaleLoweCase()，toUpperCase()和toLocaleUpperCase()。toLowerCase()和toUpperCase()方法是原来就有的方法，而toLocaleLoweCase()和toLocaleUpperCase()方法是在基于特定地区实现。在很多地区，地区特定的方法与通用的方法是一样的。但在少数语言中（如土耳其语），Unicode 大小写转换需应用特殊规则，要使用地区特定的方法才能实现正确转换。

let stringValue = "hello world";

console.log(stringValue.toLocaleUpperCase()); // "HELLO WORLD"

console.log(stringValue.toUpperCase()); // "HELLO WORLD"

console.log(stringValue.toLocaleLowerCase()); // "hello world"

console.log(stringValue.toLowerCase()); // "hello world"

字符串模式匹配方法

String 类型专门为在字符串中实现模式匹配设计了几个方法。第一个就是 match()方法，这个方法本质上跟 RegExp 对象的 exec()方法相同。match()方法接收一个参数，可以是一个正则表达式字符串，也可以是一个 RegExp 对象。来看下面的例子：

let text = "cat, bat, sat, fat";

let pattern = /.at/;

// 等价于 pattern.exec(text)

let matches = text.match(pattern);

console.log(matches.index); // 0

console.log(matches[0]); // "cat"

console.log(pattern.lastIndex); // 0

另一个查找模式的字符串方法是 search()。这个方法唯一的参数与 match()方法一样：正则表达式字符串或 RegExp 对象。这个方法返回模式第一个匹配的位置索引，如果没找到则返回1。search()始终从字符串开头向后匹配模式。看下面的例子：

let text = "cat, bat, sat, fat";

let pos = text.search(/at/);

console.log(pos); // 1

这里，search(/at/)返回 1

字符串替换操作replace()，第一个参数可以是RegExp对象或字符串，第二参数可以是字符串或一个函数。

let result = text.replace("at", "ond");

console.log(result); // "cond, bat, sat, fat"

result = text.replace(/at/g, "ond");

console.log(result); // "cond, bond, sond, fond"

最后一个是split()，将字符串拆分成数组，第一个参数是作为分隔符的字符串，第二个参数，数组大小，确保数组不会超过指定大小。

let colorText = "red,blue,green,yellow";

let colors1 = colorText.split(","); // ["red", "blue", "green", "yellow"]

let colors2 = colorText.split(",", 2); // ["red", "blue"]

let colors3 = colorText.split(/[^,]+/); // ["", ",", ",", ",", ""]

localeCompare()方法

这个方法比较两个字符串，返回如下 3 个值中的一个。

如果按照字母表顺序，字符串应该排在字符串参数前头，则返回负值。（通常是-1，具体还要看与实际值相关的实现。）
如果字符串与字符串参数相等，则返回 0。
如果按照字母表顺序，字符串应该排在字符串参数后头，则返回正值。（通常是 1，具体还要看与实际值相关的实现。）

let stringValue = "yellow";

console.log(stringValue.localeCompare("brick")); // 1

console.log(stringValue.localeCompare("yellow")); // 0

console.log(stringValue.localeCompare("zoo")); // -1

localeCompare()的独特之处在于，实现所在的地区（国家和语言）决定了这个方法如何比较字符串。在美国，英语是 ECMAScript 实现的标准语言，localeCompare()区分大小写，大写字母排在小写字母前面。但其他地区未必是这种情况。

原文：JavaScript 高级程序设计(第四版)