14. JS字符串及字符串的常用方法1.创建字符串的方式 1.1字面量的形式创建字符串 1.2内置构造函数的形式创建字符

1.创建字符串的方式

1.1字面量的形式创建字符串

var str = 'abc'

1.2内置构造函数的形式创建字符串

//var str = new String()
var str = new String('abc')
console.log(str)//String {'abc'}

2.字符串的length与下标

字符串的length与下标的含义与数组中的一样,length:长度;索引(下标):获取到字符串中指定位置的值

var str = 'abc'
console.log(str.length)//3
console.log(str[1])//b

注意:字符串中通过索引能够获取到指定位置的值,只不过获取到的值是只读的

var str = 'abc'
str[1] = 'Q'//因为字符串通过索引获取到的值是只读的,我们修改是没用的,所以这行代码没意义
console.log(str)//abc

3.字符串常用方法

3.1 charAt

语法:字符串.charAt(索引)
作用:查询指定下标的值
返回值:查询到的值,如果没有查询到就是一个空字符串

    var str = 'abcd'
    var str1 = str.charAt(0)
    console.log(str1) // a
    var str2 = str.charAt(50)
    console.log(str2) // 空字符串

3.2 charCodeAt

语法:字符串.charCodeAt(索引)
作用:查询指定下标的值对应的十进制码
返回值:查询到的值对应的十进制码,如果没有查询到会返回一个 NaN

    var str = 'abcd'
    var str1 = str.charCodeAt(0)
    console.log(str1) // 字符串a的十进制码:  97
    var str2 = str.charCodeAt(50)
    console.log(str2) // NaN

3.3 toLowerCase

语法:字符串.toLowerCase()
作用:将字符串全部转换成小写
返回值:转换后的字符串

    var str1 = 'abcDEF'
    var str2 = 'QWER'
    var str3 = 'asdf'
    //var str4 = str1.toLowerCase()
    //console.log(str4)
    console.log(str1.toLowerCase()) // abcDEF  ->  abcdef
    console.log(str2.toLowerCase()) // QWER  ->  qwer
    console.log(str3.toLowerCase()) // asdf  ->  asdf

3.4 toUpperCase

语法:字符串.toUpperCase()
作用:将字符串全部转换成大写
返回值:转换后的字符串

    var str1 = 'abcDEF'
    var str2 = 'QWER'
    var str3 = 'asdf'
    console.log(str1.toUpperCase()) // abcDEF  ->  ABCDEF
    console.log(str2.toUpperCase()) // QWER  ->  QWER
    console.log(str3.toUpperCase()) // asdf  ->  ASDF

3.5 substr

语法:字符串.substr(开始索引,多少个)
作用:截取指定的字符串
返回值:截取到的字符串注意:官方说明这个方法将来某一天可能会删除,所以建议我们使用 substring

    var str = 'qwertyuiop'
    var str1 = str.substr(0, 3)//从下标0开始,截取3个,其实应该就是 下标0/1/2
    var str1 = str.substr(3, 2)//从下标3开始,截取2个,其实应该就是 下标3/4
    console.log(str1)

3.6 substring

语法:字符串.substring(开始索引,结束索引)
作用:截取指定的字符串
返回值:截取到的字符串

注意:

1.参数包前不包后
2.结束索引可以不写,相当于写了length

    var str1 = str.substring(0,3) // 从下标 0 开始,到下标 3 结束
    console.log(str1)//qwe
    var str2 = str.substring(0) // 从下标 0 开始,结束索引因为没有传递,所以默认是length,也就是从下标 0 开始,一直到字符串最后
    console.log(str2) // qwertyuiop

3.7 slice

语法:字符串.slice(开始索引,结束索引)
作用:截取指定的字符串
返回值:截取到的字符串

注意:

1.参数包前不包后
2.结束索引可以不写,相当于写了length 3.开始索引可以不写,相当于写了0 4.结束索引支持写负数,相当于写了 length + 负数

    var str1 = str.slice(0, 3) // 从下标 0 开始,到下标 3 结束
    console.log(str1) // qwe
    var str2 = str.slice(0) // 从下标 0 开始,结束索引因为没有传递,所以默认是length,也就是从下标 0 开始,一直到字符串最后
    console.log(str2) // qwertyuiop
    var str3 = str.slice() // 开始索引不写,默认为0;结束索引不写,默认为length
    console.log(str3) // qwertyuiop
    var str4 = str.slice(0,-3) // 
    console.log(str4) // qwertyu

3.8 concat

语法:字符串.concat(数据1,数据2,数据3...)
作用:将字符串和参数传递的数据进行拼接
返回值:拼接后的字符串

var str = 'qwer'
var str1 = str.concat('@','+','!')
console.log(str1) // qwer@+!

3.9 indexOf

语法:字符串.indexOf(数据,开始下标)
作用:寻找数据在字符串中的位置
返回值:找到的时候返回下标,找不到返回 -1 注意:第二个参数可以不传递,默认为0

    var str = 'qwer'
    var str1 = str.indexOf('q',1) // 在字符串 str 中,下标1的位置,开始查找字符串'q'
    console.log(str1) // -1
    // var str2 = str.indexOf('q',0) // 在字符串 str 中,下标0的位置,开始查找字符串'q'
    var str2 = str.indexOf('q') // 第二个参数没有传递,默认为 0
    console.log(str2) // 0

3.10 lastIndexOf

语法:字符串.lastIndexOf(数据,开始下标)
作用:寻找数据在字符串中的位置(从后往前/从右向左)
返回值:找到的时候返回下标,找不到返回 -1 注意:第二个参数可以不传递,默认为length - 1

    var str = 'qwer'
    var str1 = str.lastIndexOf('e',1) // 在字符串 str 中,下标1的位置,开始查找字符e
    console.log(str1) // -1
    var str2 = str.lastIndexOf('e') // 在字符串 str 中,下标1的位置,开始查找字符e
    console.log(str2) // 2

3.11 split

语法:字符串.split('符号')
作用:在字符串中找到 '符号' 然后将这个字符串分隔,并放在一个数组内
返回值:一个数组注意:参数如果传递的是空字符串(''),会将字符串全部分隔开

    var str = 'qwer, tyui, asdf, ghjk'
    console.log('原始字符:',str) // qwer, tyui, asdf, ghjk

    var str1 = str.split(',') // 通过逗号将字符串 str 分隔到一个数组中
    console.log(str1) // ['qwer', ' tyui', ' asdf', ' ghjk']

    var str2 = str.split('i') //通过 i 将字符串 str 分隔到一个数组中
    console.log(str2) //  ['qwer, tyu', ', asdf, ghjk']

    var str3 = str.split(' ') //通过 一个空格 将字符串 str 分隔到一个数组中
    console.log(str3) //  ['qwer,', 'tyui,', 'asdf,', 'ghjk']

    var str4 = str.split('') //传递的是一个空字符串 将字符串全部分隔开,放在一个数组
    console.log(str4) //  ['q', 'w', 'e', 'r', ',', ' ', 't', 'y', 'u', 'i', ',', ' ', 'a', 's', 'd', 'f', ',', ' ', 'g', 'h', 'j', 'k']

    var str5 = str.split('@') // 通过一个@将字符串 str 分隔到一个数组中,因为原始数组中没有该符号,所以打印出来就是原来的字符
    console.log(str5) //['qwer, tyui, asdf, ghjk']

3.12 trim

语法: 字符串.trim()
作用: 去掉字符串两侧的空格
返回值:去掉空格后的字符串

    var str = ' a b c '
    console.log(str)
    var str1 = str.trim()
    console.log(str1)//a b c

3.13 trimStart / trimLeft

语法: 字符串.trimStart() / 字符串.trimLeft()
作用: 去掉字符串开始(左侧)的空格
返回值:去掉空格后的字符串

    var str = ' a b c '
    console.log(str)
    var str1 = str.trimStart()
    var str2 = str.trimLeft()
    console.log(str1)
    console.log(str2)

3.14 trimEnd / trimRight

语法: 字符串.trimEnd() / 字符串.trimRight()
作用: 去掉字符串结束(右侧)的空格
返回值:去掉空格后的字符串

    var str = ' a b c '
    console.log(str)
    var str1 = str.trimEnd()
    var str2 = str.trimRight()
    console.log(str1)
    console.log(str2)

3.15 includes

语法: 字符串.includes(字符串片段)
作用: 判断当前字符串中,是否拥有指定字符串片段
返回值:一个布尔值(true -> 拥有;false -> 没有)

   var str = 'qwertyuiop'
   var str1 = str.includes('tyui')
   console.log(str1) // true
   var str2 = str.includes('tyuip')
   console.log(str2) // false

3.16 startsWith

语法: 字符串.startsWith(字符串片段)
作用: 判断字符串开头是不是指定的字符串片段
返回值:一个布尔值(true -> 是开头;false -> 不是开头)

   var str = 'qwertyuiop'
   var str1 = str.startsWith('qwer')
   console.log(str1) // true
   var str2 = str.startsWith('qw')
   console.log(str2) // true
   var str3 = str.startsWith('abc')
   console.log(str3) // false
   var str4 = str.startsWith('wer')
   console.log(str4) // false

3.17 endsWith

语法: 字符串.endsWith(字符串片段)
作用: 判断字符串结尾是不是指定的字符串片段
返回值:一个布尔值(true -> 是结尾;false -> 不是结尾)

   var str = 'qwertyuiop'
   var str1 = str.endsWith('op')
   console.log(str1) // true
   var str2 = str.startsWith('qwer')
   console.log(str2) // false

3.18 replace

语法: 字符串.replace(要被替换的字符,替换的字符)
作用: 找到当前字符串中第一个参数对应的值,然后将其替换为第二个参数
返回值:替换完成的字符串

  var str = 'abcdefg'
  var str1 = str.replace('abc','@@!!##')
  console.log(str1) // @@!!##defg
  var str2 = str.replace('qwer','@@!!##')
  console.log(str2) // abcdefg