欢送关注前端小讴的 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) // true
var objBoolean = new Object(false) // 创立 Boolean 的实例
console.log(objBoolean instanceof Boolean) // true
var objNumber = new Object(123) // 创立 Number 的实例
console.log(objNumber instanceof Number) // true
console.log(objNumber instanceof Boolean) // false

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

var value = '25'
var number = Number(value) // 转型函数，转成 Number 类型
console.log(typeof number) // number
var 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 是根本类型，就是 false

console.log(falseObj && true) // true
console.log(falseValue && true) // false
console.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 = 10
console.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 = 10000
console.log(num2.toFixed(2)) // 指定小数位，"10000.00"
console.log(num2.toExponential(2)) // 指数表示法，"1.00e+4"

var num3 = 99
console.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 = 10
console.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=8
console.log(stringObject.substring(-3)) // "hello world"，- 3 转换为 0
console.log(stringObject.substr(-3)) // "rld"，- 3 转换为 11-3=8
console.log(stringObject.slice(3, -4)) // "lo w"，- 4 转换为 11-3=7
console.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')) // 4
console.log(stringObject.lastIndexOf('o')) // 7
console.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) // 0
console.log(matches[0]) // "cat"
console.log(pattern.lastIndex) // 0

var 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()等办法的含意，并举出相干例子