【JS高级程序设计4】5.基本引用类型-原始包装类型

JavaScript 中的对象称为引用值，几种内置的引用类型可用于创建特定类型的对象。

由于原始值包装类型的存在，JavaScript 中的原始值可以被当成对象来使用。有 3 种原始值包装类
型：Boolean、Number 和 String。它们都具备如下特点。 
 每种包装类型都映射到同名的原始类型。 
 以读模式访问原始值时，后台会实例化一个原始值包装类型的对象，借助这个对象可以操作相5 
应的数据。 
 涉及原始值的语句执行完毕后，包装对象就会被销毁。

let s1 = "some text"; 
let s2 = s1.substring(2);

第二行实际是以读模式访问的第一行，在以读模式访问字符串值时，后台会执行三个步骤：

1.创建一个string类型的实例    let s1 = new String("some text"); 

2.调用实例的特定方法   let s2 = s1.substring(2); 

3.销毁实例   s1 = null;

经过以上步骤，使得原始值拥有对象的行为。

引用类型：

一、Boolean

二、Number

let numberObject = new Number(10); 

创建一个number对象，则继承了object的方法：valueOf()、toLocaleString()和 toString()方法。

valueOf会返回原始数值，后面两则返回字符串。

可以将数值格式化为字符串的方法：

1.toFixed()方法返回包含指定小数点位数的数值字符串，可以表示有 0~20 个小数位的数值

let num = 10; 
console.log(num.toFixed(2)); // "10.00" 

2.toExponential()，返回以科学记数法（也称为指数记数法）表示的数值字符串

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

3.toPrecision()方法会根据情况返回最合理的输出结果，可能是固定长度，也可能是科学记数法
形式，可以表示带1~21 个小数位的数值。本质上，toPrecision()方法会根据数值和精度来决定调用 toFixed()还是 toExponential()

let num = 99; 
console.log(num.toPrecision(1)); // "1e+2" 
console.log(num.toPrecision(2)); // "99" 
console.log(num.toPrecision(3)); // "99.0" 

ES6 新增了 Number.isInteger()方法，用于辨别一个数值是否保存为整数

console.log(Number.isInteger(1));    // true 
console.log(Number.isInteger(1.00)); // true 2 
console.log(Number.isInteger(1.01)); // false

三、String

每个 String 对象都有一个 length 属性，表示字符串中字符的数量。

JavaScript 字符，使用了两种Unicode 编码混合的策略：UCS-2 和UTF-16。

字符串方法

1.拼接字符组成新字符串     concat（）、+

let stringValue = "hello "; 
let result = stringValue.concat("world", "!"); 
console.log(result);      // "hello world!" 
console.log(stringValue); // "hello" 

+加号操作符更常用

2.提取字符串     slice()、 substring()、substr()

参数说明：

 slice(开始位置，结束位置)

substring(开始位置，结合位置)

substr(开始位置，提取数量)

只传第一个参数，默认提取到字符串末尾

let stringValue = "hello world"; 8 
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" 9 
console.log(stringValue.substring(3,7)); // "lo w" 
console.log(stringValue.substr(3, 7));   // "lo worl" 

当参数为负数时

slice()方法将所有负值参数都当成字符串长度加上负参数值

substring()方法会将所有负参数值都转换为0

substr()方法将第一个负参数值当成字符串长度加上该值，将第二个负参数值转换为 0

let stringValue = "hello world"; 
console.log(stringValue.slice(-3));         // "rld" 13 
console.log(stringValue.substring(-3));     // "hello world" 
console.log(stringValue.substr(-3));        // "rld" 
console.log(stringValue.slice(3, -4));      // "lo w" 
ccoonnssoollee..lloogg((ssttrriinnggVVaalluuee..ssuubbssttrri(n3g,( 3-,4 )-)4;) ) ;       ""h"e l("e mpty string) 

3.字符串位置方法    indexOf()和 lastIndexOf()

indexOf()方法从字符串开头开始查找子字符串

lastIndexOf()方法从字符串末尾开始查找子字符串

参数说明

indexOf(查找字符，开始搜索的位置)

lastIndexOf(查找字符，开始搜索的位置/反向/)

let stringValue = "hello world"; 
console.log(stringValue.indexOf("o", 6));     // 7 
console.log(stringValue.lastIndexOf("o", 6)); // 4 

用这两种方法可以遍历整个字符串，找到指定字符串的所有位置

let stringValue = "Lorem ipsum dolor sit amet, consectetur adipisicing elit"; 
let positions = new Array();  
let pos = stringValue.indexOf("e"); 
 
while(pos > -1) { 
  positions.push(pos); 
  pos = stringValue.indexOf("e", pos + 1); 
} 
 
console.log(positions); // [3,24,32,35,52] 

4.字符串包含方法   startsWith()、endsWith()和 includes()

startsWith()检查开始于索引 0 的匹配项

endsWith()检查开始于索引(string.length - substring.length)的匹配项

includes()检查整个字符串

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  
 
console.log(message.includes("bar"));    // true 
console.log(message.includes("qux"));    // false 

参数说明

startsWith(指定字符，开始搜索的位置)

endsWith(指定字符，应该当作字符串末尾的位置)，没有第二个参数则默认是字符串长度

includes(指定字符，开始搜索的位置)

let message = "foobarbaz"; 
 
console.log(message.endsWith("bar"));     // false  9 
console.log(message.endsWith("bar", 6));  // true 

5.去空格方法  trim()、trimLeft()和 trimRight()

trim() 去除前后空格

trimLeft()  从字符串开始清理空格符

trimRight()  从字符串末尾清理空格符

let stringValue = "  hello world  "; 
let trimmedStringValue = stringValue.trim(); 
console.log(stringValue);         // "  hello world " 
console.log(trimmedStringValue);  // "hello world"

6.复制字符串  repeat()、padStart()、padEnd()方法 

repeat()复制

padStart()、padEnd()如果小于指定长度，则在相应一边填充字符，直至满足长度条件

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(最终长度，可选的填充字符串)，第二个参数默认为空格，如果填充字符串超出最终长度，则会截断

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......" 

let stringValue = "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));          // "foo" 

7.迭代与结构  @@iterator 方法 、for of、...展开方法

手动使用迭代器

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} 

symbol.Iterator是symbol的内置符号

“这个符号可以是任意对象上的一个专门属性，语言机制会自动的在这个属性上寻找一个方法，这个方法会构造一个迭代器来迭代这个对象的值，这个方法就是next方法，...展开和for/of循环会自动使用它，我们可以自定义symbol.iterator属性为任意对象值定义自己的迭代器逻辑，他将覆盖默认的迭代器。相当于是定义了一种元编程行为，提供给Javascript其他部分（也就是运算符和循环结构）在处理定义的对象时使用。

在Js中迭代器对象实现了可迭代协议，迭代器对象由Symbol.iterator属性的值返回。
Symbol.iterator属性的值是一个函数，它返回一个迭代器对象。
迭代器指的是拥有next方法的对象。
该next方法必须返回一个带有value和done的对象。”

“为什么会出现for..of?

为了理解条件语句，我们曾想象JavaScript解释器在源代码中会经过不同路径。而循环语句则是把这些路径弯曲又折回起点，以重复执行代码中的某部分。

es6定义了一个新循环语句：for/of。这种新循环虽然使用for关键字，但它们是完全不一同的两种循环，你说和for/in像不像？为什么？

for/of循环是专门用于可迭代对象的，什么是可迭代对象呢？

我们前文提到具有symbol.iterator属性的对象就是可以迭代的。而这个对象就是可迭代对象。

对象本身默认是不可迭代的。运行时尝试对常规对象使用for/of会抛出TypeError。for...of语法借鉴自C++、Java、C# 和 Python，作为用来遍历所有数据结构的统一方法。”源自CSDN博主「牧之说前端」

在 for-of 循环中可以通过这个迭代器按序访问每个字符： 

for (const c of "abcde") { 
  console.log(c); 
}  
 
// a 
// b 
// c 
// d 
// e 

有了这个迭代器之后，字符串就可以通过解构操作符来解构了。比如，可以更方便地把字符串分割
为字符数组： 

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

8.字符串大小写转换    toLowerCase()、toLocaleLowerCase()、toUpperCase()和toLocaleUpperCase()

后两者可以对特殊语言使用如土耳其语

let stringValue = "hello world"; 
console.log(stringValue.toLocaleUpperCase());  // "HELLO WORLD" 
console.log(stringValue.toUpperCase());        // "HELLO WORLD" 
console.log(stringValue.toLocaleLowerCase());  // "hello world"  3 
console.log(stringValue.toLowerCase());        // "hello world"

9.字符串模式匹配方法   match()方法、search()方法、replace()方法、split()方法

match()等价于pattern.exec(text) ，可以接收正则表达式

let text = "cat, bat, sat, fat";  6 
let pattern = /.at/; 

let matches = text.match(pattern);  7 
console.log(matches.index);      // 0 
console.log(matches[0]);         // "cat" 
console.log(pattern.lastIndex);  // 0

search()方法也可以接收正则表达式，返回模式第一个匹配的位置索引，如果没找到则返回1。

let text = "cat, bat, sat, fat";  10 
let pos = text.search(/at/); 
console.log(pos);  // 1 

repalce(字符串或者正则表达式，字符串或函数)，用于替换

如果第一个参数是字符串，那么只会替换第一个子字符串。要想替换所有子字符串，第一个参数必须为正则表达式并且带全局标记

let text = "cat, bat, sat, fat"; 
let result = text.replace("at", "ond"); 
console.log(result);  // "cond, bat, sat, fat"  13 
 
result = text.replace(/at/g, "ond"); 
console.log(result);  // "cond, bond, sond, fond" 

split()根据传入的分隔符将字符串拆分成数组。作为分隔符的参数可以是字符串，也可以是 RegExp 对象

split(分隔符，数组大小)

let colorText = "red,blue,green,yellow";  2 
let colors1 = colorText.split(",");       // ["red", "blue", "green", "yellow"] 
let colors2 = colorText.split(",", 2);    // ["red", "blue"] 
let colors3 = colorText.split(/[^,]+/);   // ["", ",", ",", ",", ""] 

10.比较两个字符串       localeCompare()方法 

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

let stringValue = "yellow"; 
console.log(stringValue.localeCompare("brick"));  // 1 
console.log(stringValue.localeCompare("yellow")); // 0 
console.log(stringValue.localeCompare("zoo"));    // -1 

但是返回的具体值可能因具体实现而异，按照下述语句可以保证在所有实现中都能正确判断字符串的顺序。

function determineOrder(value) {  
  let result = stringValue.localeCompare(value);  
  if (result < 0) { 
    console.log(`The string 'yellow' comes before the string '${value}'.`); 
  } else if (result > 0) { 
    console.log(`The string 'yellow' comes after the string '${value}'.`);  
  } else { 
    console.log(`The string 'yellow' is equal to the string '${value}'.`); 
  } 
}   
determineOrder("brick"); 
determineOrder("yellow"); 
determineOrder("zoo"); 

localeCompare()区分大小写，大写字母排在小写字母前面。localeCompare()实现所在的地区（国家和语言）决定了这个方法如何比较字符串。

11.生成HTML标签  很少有人使用