欢送关注前端小讴的github，浏览更多原创技术文章

根本包装类型

相干代码 →

• 3 个非凡的援用类型 Boolean、Number、String
• 每读取一个根本类型值，后盾就创立一个对应的根本包装类型的对象

var s1 = 'some text'var s2 = s1.substring(2) // 根本类型不是对象，本不应该有办法// 因为后盾主动实现了下列解决：var s1 = new String('some text') // 1.创立String类型的实例var s2 = s1.substring(2) // 2.在实例上调用指定办法s1 = null // 3.销毁该实例

• 上述步骤同样实用于 Boolean 和 Number类型

• 援用类型和根本包装类型的次要区别在于对象的生存期：

  • 援用类型：来到作用域前，对象始终在内存中
  • 根本包装类型：执行完，立刻被销毁

var s1 = 'some text's1.color = 'red' // 创立String对象console.log(s1.color) // undefined，s1对象已被销毁，同时再次创立String对象，新对象没有color属性

• 对根本包装类型的实例调用 typeof 会返回"Object"，所有根本包装类型的对象都会被转换为布尔值 true
• Object 构造函数，依据传入值的类型返回根本包装类型的实例

var objText = new Object('some text') // 创立String的实例console.log(objText instanceof String) // truevar objBoolean = new Object(false) // 创立Boolean的实例console.log(objBoolean instanceof Boolean) // truevar objNumber = new Object(123) // 创立Number的实例console.log(objNumber instanceof Number) // trueconsole.log(objNumber instanceof Boolean) // false

• 应用 new 调用根本包装类型的构造函数 vs 间接调用同名的转型函数

var value = '25'var number = Number(value) // 转型函数，转成Number类型console.log(typeof number) // numbervar obj = new Number(value) // 构造函数，结构Number对象实例console.log(typeof obj) // object

Boolean 类型

var booleanObject = new Boolean(true) // 调用Boolean构造函数，并传入true/false

• 根本类型布尔值 vs 援用类型布尔值：

  • typeof 操作符对根本类型返回 boolean，对援用类型返回 object
  • instance 操作符对根本类型返回 false，对援用类型返回 true

var falseObj = new Boolean(false) // falseObj是根本包装类型，被转换成true（所有根本包装类型对象都会被转换成true）var falseValue = false // falseValue是根本类型，就是falseconsole.log(falseObj && true) // trueconsole.log(falseValue && true) // falseconsole.log(typeof falseObj) // object，根本包装类型console.log(typeof falseValue) // boolean，根本类型console.log(falseObj instanceof Boolean) // true，Boolean对象是Boolean类型的实例console.log(falseValue instanceof Boolean) // false

Number 类型

var numberObject = new Number(10) // 调用Number构造函数，并传入数值

• 为 toString()办法传递示意基数的参数，通知返回几进制的字符串模式

var num1 = 10console.log(num1.toString()) // 十进制，"10"console.log(num1.toString(2)) // 二进制，"1010"console.log(num1.toString(8)) // 八进制，"12"console.log(num1.toString(10)) // 十进制，"10"console.log(num1.toString(16)) // 十六进制，"a"

var num2 = 10000console.log(num2.toFixed(2)) // 指定小数位，"10000.00"console.log(num2.toExponential(2)) // 指数表示法，"1.00e+4"var num3 = 99console.log(num3.toPrecision(1)) // 用一位数示意，"1e+2"console.log(num3.toPrecision(2)) // 用二位数示意，"99"console.log(num3.toPrecision(3)) // 用三位数示意，"99.0"

• 根本类型数值 vs 援用类型数值：

  • typeof 操作符对根本类型返回 number，对援用类型返回 object
  • instance 操作符对根本类型返回 false，对援用类型返回 true

var numberObject = new Number(10)var numberValue = 10console.log(typeof numberObject) // object，根本包装类型console.log(typeof numberValue) // value，根本类型console.log(numberObject instanceof Number) // true，Number对象是Number类型的实例console.log(numberValue instanceof Number) // false

String 类型

var StringObject = new String('hello world') // 调用String构造函数，并传入字符串

• String 类型每个实例都有 length 属性，示意字符串蕴含的字符数量，双节字符也算作 1 个字符

console.log(stringObject.length) // "11"

console.log(stringObject.charAt(1)) // "e"console.log(stringObject.charCodeAt(1)) // "101"console.log(stringObject[1]) // "e"

console.log(stringObject.concat(' wonderful')) // "hello world wonderful"console.log(stringObject.slice(3)) // "lo world"console.log(stringObject.substring(3)) // "lo world"console.log(stringObject.substr(3)) // "lo world"console.log(stringObject.slice(3, 7)) // "lo w"，第二个参数指定到哪里完结（不蕴含）console.log(stringObject.substring(3, 7)) // "lo w"，第二个参数指定到哪里完结（不蕴含）console.log(stringObject.substr(3, 7)) // "lo worl"，第二个参数指定要返回的字符个数

console.log(stringObject.slice(-3)) // "rld"，-3转换为11-3=8console.log(stringObject.substring(-3)) // "hello world"，-3转换为0console.log(stringObject.substr(-3)) // "rld"，-3转换为11-3=8console.log(stringObject.slice(3, -4)) // "lo w"，-4转换为11-3=7console.log(stringObject.substring(3, -4)) // "lo w"，-4转换为0，substring(3,0)再转换为substring(0,3)console.log(stringObject.substr(3, -4)) // ""，-4转换为0，返回蕴含零个字符的字符串

console.log(stringObject.indexOf('o')) // 4console.log(stringObject.lastIndexOf('o')) // 7console.log(stringObject.indexOf('o', 6)) // 7，第二个参数示意从哪个地位开始搜寻console.log(stringObject.lastIndexOf('o', 6)) // 4，第二个参数示意从哪个地位开始搜寻var loremString =  'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'var position = new Array()var pos = loremString.indexOf('o')while (pos > -1) {  position.push(pos)  pos = loremString.indexOf('o', pos + 1)}console.log(position) // 所有蕴含o的字符地位汇合

var stringValue = '  hello world  'var trimStringValue = stringValue.trim()console.log(stringValue) // "  hello world  "console.log(trimStringValue) // "hello world"

console.log(stringObject.toUpperCase()) // "HELLO WORLD"console.log(stringObject.toLocaleUpperCase()) // "HELLO WORLD"console.log(stringObject.toLowerCase()) // "hello world"console.log(stringObject.toLocaleLowerCase()) // "hello world"

var text = 'cat, bat, sat, fat'var pattern = /.at/var matches = text.match(pattern)console.log(matches) // [ 'cat',index: 0,input: 'cat, bat, sat, fat',groups: undefined ]// match办法返回一个数组，第一项与整个模式匹配的字符串，前面的项保留着与正则表达式捕捉匹配的字符串console.log(matches.index) // 0console.log(matches[0]) // "cat"console.log(pattern.lastIndex) // 0var pos = text.search(/at/)console.log(pos) // 1，记录"at"首次在字符串呈现的地位var 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"，第一个参数是全局正则所以替换全副的result = text.replace(/(.at)/g, 'word($1)')console.log(result) // "word(cat), word(bat), word(sat), word(fat)"，$1示意第一个匹配的参数function htmlEscape(text) {  return text.replace(/[<>"&]/g, function (match, pos, originalText) {    switch (match) {      case '<':        return '&lt;'        break      case '>':        return '&gt;'        break      case '&':        return '&amp;'        break      case '"':        return '&quot;'        break    }  })}console.log(htmlEscape('<p class="greeting">Hello world!</p>')) // "&lt;p class=&quot;greeting&quot;&gt;Hello world!&lt;/p&gt;"console.log(text.split(',')) // [ 'cat', ' bat', ' sat', ' fat' ]console.log(text.split(',', 2)) // [ 'cat', ' bat' ]，第二个参数指定数组大小console.log(text.split(/[^\,]+/)) // [ '', ',', ',', ',', '' ]，通过正则获取蕴含都好字符的数组，正则指定分隔符呈现在了字符串结尾和开端，因而首位是空字符串

var stringCompare = 'yellow'console.log(stringCompare.localeCompare('brick')) // 1，brick字母表在yellow之前console.log(stringCompare.localeCompare('yellow')) // 0，yellow字母表与yellow雷同console.log(stringCompare.localeCompare('zoo')) // -1，zoo字母表在yellow之后function determineOrder(value) {  var result = stringCompare.localeCompare(value)  result < 0 &&    console.log(`The string 'yellow' comes before the string ${value}.`)  result > 0 &&    console.log(`The string 'yellow' comes after the string ${value}.`)  result === 0 &&    console.log(`The string 'yellow' is equal to the string ${value}.`)}determineOrder('brick') // "The string 'yellow' comes after the string brick."determineOrder('yellow') // "The string 'yellow' is equal to the string zoo."determineOrder('zoo') // "The string 'yellow' comes before the string zoo."

// 将若干字符编码转换成字符串，与charCodeAt()相同console.log(String.fromCharCode(104, 101, 108, 108, 111)) // "hello"

总结 & 问点

• 根本包装类型蕴含哪些非凡的援用类型？读取时后盾经验了什么步骤？
• 援用类型和根本包装类型的次要区别是什么？
• 对根本包装类型的实例调用 typeof 会返回什么？根本包装类型的对象都会被转换为什么？
• 请应用 Object 构造函数判断根本包装类型的实例
• 应用 new 调用根本包装类型的构造函数与间接调用同名转型函数的区别是什么？
• Boolean 的援用类型重写了哪些办法？其根本类型和援用类型的区别是什么？
• Number 的援用类型重写了哪些办法？提供了哪些格式化字符串办法？其根本类型和援用类型的区别是什么？
• String 的援用类型重写了哪些办法？提供了哪些字符串操作或解析办法？其根本类型和援用类型的区别是什么？
• 请阐明 charAt()、charCodeAt()、concat()、slice()、substr()、substring()、indexOf()、lastIndexOf()、trim()、toLowerCase()、toUpperCase()、match()、search()、replace()、split()、localeCompare()、fromCharCode()等办法的含意，并举出相干例子