hongyangwu

主题

原始值包装类型 ​

所有包装类型的方法都不会改变原始值，只会返回改变的后结果，因为原始值是定长的，不能改变的

包装类型 ​

  • 有三个原始值包装类型：Boolean、Number、String

  • 特殊行为：每当用到其的方法或属性时，后台会创建一个相应原始包装类型的对象，从而暴露出操作原始值的各种方法

    js
    const s1 = "hello"
const s2 = s1.substring(2)

    后台做了以下三步

    1. 创建一个 String 类型的实例

    2. 调用实例上的特定方法

    3. 销毁实例

      js
      const s3 = new String("hello")
const s2 = s3.substring(2)
s3 = null

Boolean 包装类型方法 ​

方法返回值
valueOf原始值 true 或 false
toString字符串 “true” 或 “false”

永远使用原始布尔值，而不用 Boolean 构造函数，因为有可能会出现以下困惑

js
const falseObj = new Boolean(false)
console.log( falseObj && true ) // true

Number 包装类型方法 ​

方法返回值
valueOf- 返回 Number 对象表示的原始数值
toString
toLocaleString		- 返回数值字符串

  1. toFixed()

    • 参数：小数点位数

    • 返回：四舍五入后，指定小数点位数的数值字符串

      js
      const num = 10.005
console.log( num.toFixed(2) ) // "10.01"

  2. toExponential()

    • 返回：科学计数法表示的数值字符串

      js
      const num = 10.005
const num = 10.005
console.log( num.toExponential() ) // "1.0005e+1"

  3. toPrecision()

    • 参数：结果中数字的总位数

    • 返回：根据情况，返回最合理的输出结果（会向下或向上舍入）

      js
      const num = 10.005
console.log( num.toPrecision(1) ) // 1e+1
console.log( num.toPrecision(2) ) // 10
console.log( num.toPrecision(3) ) // 10.0

String 包装类型方法 ​

  1. 字符串长度：length

  2. 提取子串：slice()、substr()、substring()

    • 第一个参数：开始截取的位置
    • 第二个参数：可选，省略的话，都是截取至字符串末尾
      • slice() 和 substring 是结束截取的位置（不包括结束位置的字符）
      • substr() 是子串的长度
    • 返回：提取后的子串，不改变原始字符串
    js
    const s = 'hello world'
console.log( s.slice(3), s.substring(3), s.substr(3) ) // "lo world"
console.log( s.slice(3, 7), s.substring(3, 7) )        // "lo w"
console.log( s.substr(3, 7) )                          // "lo worl"

    但参数是负值时，又会有区别，因为使用较少，只述说概念

    • slice() 将所有负值都当成 字符串长度加上负参数后的结果
    • substr() 将第一个参数的负值当成 字符串长度加上负参数 后的结果，第二个参数的负值转换成 0
    • substring() 将所有负值转换为 0

  3. 定位子串：indexOf()、lastIndexOf()

    • 第一个参数：要查找的子串
    • 第二个参数：开始查找的位置（可选）
    • 返回：返回找到的位置，没找到则返回 -1
    js
    const s = 'hello world'
console.log( s.indexOf("o") )     // 4
console.log( s.lastIndexOf("o") ) // 7

  4. 判断是否包含子串：startsWith()、endsWith()、includes()

    • 第一个参数：要判断的子串
    • 第二个参数（只有 startsWith() 和 endsWith 有）：开始查找的位置
    • 返回：布尔值

    区别：

    • startsWith()：从索引 0 ，或指定位置开始检查
    • endsWith()：从 (srting.length - substring.length) ，或 (string.length - 指定位置) 开始检查
    • includes()：检查整个字符串
    js
    const s = 'foobarbaz'

console.log( s.startsWith('foo') ) // true
console.log( s.startsWith('bar') ) // false

console.log( s.endsWith('baz') )   // true
console.log( s.endsWith('bar') )   // false

console.log( s.includes('bar') )   // true

  5. 去除空格：trim()、trimLeft()、trimRight()

    • 返回：去除空格后的字符串，不改变原字符串

    trim()：去除前后所有空格

    trimLeft()：去除左边所有空格

    trimRight()：去除右边所有空格

  6. 重复字符串：repeat()

    • 参数：重复次数
    • 返回：拼接所有副本的结果
    js
    const s = 'oh '
console.log( s.repeat(3) ) // oh oh oh

  7. 自动填充字符串：padStart()、padEnd()

    • 第一个参数：填充完后的字符串长度
    • 第二个参数：使用什么字符串填充，默认是空格（可选）
    • 返回：填充完后的字符串，不改变原字符串
    js
    const s = '1'

console.log( s.padStart() )    // " 1"
console.log( s.padEnd() )      // "1 "

console.log( s.padStart(2, '0') ) // "01"

  8. 匹配正则表达式：match()、search()

    • match() 与 RegExp.exec() 相似，详细可以查看 5-2 RegExp

      • 参数：RegExp或正则表达式字符串
      js
      const s = 'cat, bat, sat'
const matches = s.exec(/.at/)

console.log( match[0] )    // "cat"
console.log( match.index ) // 0

    • search()

      • 参数：RegExp或正则表达式字符串

      • 返回第一个匹配的位置索引，没有找到则返回 -1

  9. 替换子串：replace()、replaceAll()

    • 第一个参数：RegExp 或一个字符串（字符串不会转换成正则表达式）
    • 第二个参数：字符串或函数
    • 返回：用第二个参数替换第一个参数后的字符串，不改变原字符串

    replace() 只会替换第一个匹配到的子串，如果想要替换所有匹配的子串，可以使用 replaceAll()，或传入全局 RegExp

    js
    const s = 'cat, bat, sat'
console.log( s.replace("at", "o") )     // co, bat, sat
console.log( s.replace(/at/, "o") )     // co, bat, sat

console.log( s.replaceAll("at", "o") )  // co, bo, so
console.log( s.replace(/at/g, "o") )    // co, bo, so

    高级用法，详细请看书

    1. 使用 RegExp 替换时，可以在替换参数（第二个）里插入特殊字符序列，获取匹配到的组
    2. 替换参数使用函数，可以自定义替换规则

  10. 拆分字符串：split()

    • 第一个参数：分隔符，字符串（不会转换成正则表达式）或 RegExp
    • 第二个参数：返回数组的长度（可选）
    • 返回：根据分隔符将字符串拆分成的数组，如果有第二个参数，则截取固定长度的数组再返回
    js
    const s = 'cat,bat,sat'

console.log( s.split(',') )     // ["cat", "bat", "sat"]
console.log( s.split(',', 1) )  // ["cat"]

  11. 大小写转换：toLowerCase()、toUpperCase()、toLocaleLowerCase()、toLocaleUpperCase()

    • toLowerCase()、toLocaleLowerCase()：所有字符转换成小写
    • toUpperCase()、toLocaleUpperCase()：所有字符转换成大写

    toLocaleLowerCase()、toLocaleUpperCase() 基于特定地区实现。特殊语言也可以转换成功。所以，当不确定涉及的语言时，最好使用这两个方法

  12. 比较两个字符串：localCompare()

    • 按照字母表顺序，字符串排在字符串参数前头，返回负值（通常是 -1）
    • 按照字母表顺序，字符串与字符串参数一致，返回 0
    • 按照字母表顺序，字符串排在字符串参数后头，返回正值（通常是 1）
    js
    const s = 'abc'

console.log( s.localeCompare('aac') ) // 1
console.log( s.localeCompare('abc') ) // 0
console.log( s.localeCompare('bbc') ) // -1

    区分大小写，大写字母排在小写字母前面

Copyright © 2021-2024 hongyangwu