se6 随性学习之 字符串

字符串

字符串（string）是js的原始数据类型（在java String 是引用类型）

• 在这里科普一下javaScript的数据了些
  • javaScript数据类型有：

   Number、Boolean、String、undefined、object、Null
   // ES6 新增 
   Symbol 
  // es10中新增的数据类型 属于原始数据类型 用于处理大整数（这里不做过多的介绍 ···手动保命，因为我也不了解···）
   biglnt
  // 也是一种新增的基本数据类型
  
  + javaScript 有八种数据类型 `Number、Boolean、String、undefined、object、Null、Symbol、biglnt`
  + 基本数据类型有：`Number、Boolean、String、undefined、Null、Symbol、biglnt`
  + 引用类型：`object`
  + NaN是Number的一种
  + 这里不做过多的介绍以后会找时间出一期js的数据类型详情
  

回到原题 string es6新增的特性

• es6新增方法
  • includes() 判断是否找到参数字符串，找到会返回true反之false
  • startsWith() 判断参数字符串是否在原字符串的头部,找到会返回true反之false
  • endsWith() 判断参数字符串是否在原字符串的尾部,找到会返回true反之false
    • 这三个方法不能传入正则，否则会报错错误

      let str = 'aaa,bbb,ccc'
      console.log(str.includes('bbb')) // true
      console.log(str.includes('zzz')) // false
      console.log(str.startsWith('aaa')) // true
      console.log(str.startsWith('bbb')) // false
      console.log(str.endsWith('ccc')) // true
      console.log(str.endsWith('bbb')) // false
  

  • 要查找字符串的位置还得用indexOf、lastIndexOf

      // 顺带科普一下这两个方法
      let str1 = 'Hello World'
      // indexOf() 第一次出现的位置
      console.log(str1.indexOf('e')) // 1 （字符串第一位为 0 ）
      // lastIndexOf() 字符串最后出现的位置
      console.log(str1.lastIndexOf('e')) // 1
      console.log(str1.lastIndexOf('l')) // 9 别忘了还有空格
  

• repeat() repeat英文翻译都是重复 所以javascript中也是对字符串进行重复 并反会重复后的字符串

  let str = 'hello,'
  // 参数为数字 重复几次就传几
  console.log(str.repeat(3)) // 'hello,hello,hello,'
  // 当你传入一个小数会向下取整
  console.log(str.repeat(3.9)) // 'hello,hello,hello,'
  // 有同学就会说了 那我传入一个负数行不行
  console.log(str.repeat(-0.9)) // 行 会反会 ""
  // 当你传入的负数 是-1 或者小于-1 时会报错
  console.log(str.repeat(-1)) //Uncaught RangeError: Invalid count value
  // 当然传入  Infinity 也一样会报错
  // 如果传入的时字符串 会转换为数字 转换不了数字会输出 ""
  

• 字符串补全
  • padStart() 在原字符串前面添加字符串
  • padEnd()在原字符串后面添加字符串

      let str = 'hello'
      // 接受两个参数 第一个参数控制新生成的字符串长度，第二个参数是需要拼接的字符串
      console.log(str.padStart(9, 'a')) // "aaaahello"
      // 也可以直接在字符串上使用
      console.log('hello'.padStart(9, 'a')) // "aaaahello"
      // 效果是一样的
      // 假如 第一个参数不够原字符串长度会反会原字符串
      console.log('hello'.padStart(3, 'a')) // "hello"
      console.log(str.padStart(10, 'abc')) // "abcabhello"
      console.log('hello'.padStart(10, 'abc')) // "abcabhello"
  

• 模板字符串
  • 在键盘的左上角 esc 下面的案件 `` 功能和 "" ''一样
  • 演示一下不一样的地方

      let name = 'World'
      let str = `Hello${name}` // 大括号中可以使用变量和函数
      // 用法都差不多 模板字符串 换行和空格都会被保留
      // 在输出dom的时候就方便很多
      let my_class = 'app'
      let my_class1 = 'app1'
      let oldDom = '<div class="' + my_claa + '"><span class="' + my_class1 + '"></span></div>'
      // 属性多就更加烧脑了
      // 使用模板字符串 字符串拼接不容易出错
      let newDom = `<div class="${my_class}"><span class="${my_class1}"></span></div>`
  
  

• 官方给的案例还有一个 标签模板 小编在日常工作中不常用

      // 效果一样
      alert`Hello World`
      alert('Hello World')
  

文章最后 能不能点个赞