JavaScript字符串

JavaScript 字符串

---

创建字符串

一、字面量方式创建

	 var str = 'hello world'

​

• 有索引也有length，只是不能看到

	var str = 'hello world'
    console.log(str) // hello world

二、内置构造函数创建

	var str = new String('hello world')

​

• 有索引也有length，可以直接看到

	var str2 = new String('你好 世界')
    console.log(str2) // String {"你好 世界"}

• 说明：

  • 两种方式创建出来的字符串的内容虽然长得不一样
  • 但是使用的时候是一模一样的

• 知道：

  • 字符串也是按照从左到右的顺序，按照索引进行排列的
  • 字符串也有一个 length 属性，表示字符串的长度
  • 每一个空格都占一个位置

三、字符串的索引

• 字符串的索引，可以用来获取字符串里面的某一个字符

• 是一个只读属性，只能获取，不能设置

	var str = 'hello world'
    
    // 通过索引获取字符串中某一个字符
    console.log(str[6]) // w
    
    // 不能通过索引设置字符串中的某一个字符
    str[6] = 'K'
    console.log(str) // hello world

四、字符串的 length 属性

• 可以用来获取字符串的长度

• 获取长度和中英文没有关系，就是看你写了多少个字符

• 是一个只读属性，只能获取，不能设置

	var str = '你好 世界'
    
    // 通过 length 属性获取该字符串的长度
    console.log(str.length) // 5
    
    // 通过 length （不能）设置该字符串的长度
    str.length = 100
    console.log(str) // 你好 世界

---

字符串的 ASCII 码

• https://tool.oschina.net/commons/

• 读作：as key 的发音

一、什么是 ASCII 码

• 我们的每一个符号，字母，数字在计算机存储的时候都不是直接存储的

• 是把每一个符号，字母，数字给一个编号，在计算机存储的是这个编号

• 我们管这个编号叫做ASCII码

二、拓展

• 为了便于各个国家的文字使用，就有了unicode编码

• 后来为了 web 开发，有了一种 8 位的 unicode 编码，叫做UTF-8

  • 还有一种 16 位的 unicode 编码，叫做UTF-16

• 不同的编码字符集里面，每一个文字的编号不一样

  • 你按照一个字符集写好的内容，一旦换一个字符集就是看不懂的东西
  • 比如：在 UTF-8 的格式下，不字存储的是 10235
    • 当你到了 GBK 里面，不字存储的是 6776，10235存储的是另一个文字

---

字符串的常用方法

• 都是用来操作字符串的

• 所有的方法都不改变原始字符串

• 所有的操作都是以返回值的形式给结果

一、charAt( )

• 解释一下名字

  • char ： 字符，表示一个字符
  • at ： 在哪

• 作用：根据索引找到对应的字符返回

• 语法：

  • 字符串.charAt(索引)

• 返回值：对应索引位置的字符

  • 如果有对应索引，那么得到的就是对应索引位置的字符
  • 如果没有对应索引，那么得到的就是空字符串

	var str = 'hello world'
    var res = str.charAt(8)
    console.log(res) // r

二、charCodeAt( )

• 作用：根据索引找到对应的字符，返回字符的编码

• 语法：

  • 字符串.charCodeAt(索引)

• 返回值：对应索引位置的字符编码 UTF-8 编码

	var str = '你好 世界'
    // res 获取的是 你 这个汉字的编码
    var res = str.charCodeAt(0)
    console.log(res) // 20320

三、substr( )

• 作用：从字符串里面提取出一些内容

• 语法：

  • 字符串.substr(开始的索引, 多少个)

• 返回值：一个新的字符串

  • 从原先字符串里面提取出来的内容

	var str = 'hello world'
    // 从索引 1 开始, 向后数 7 个, 提取出来
    var res = str.substr(1, 7)
    console.log(res) // ello wo

四、substring( )

• 作用：从字符串里面提取出一些内容

• 语法：

  • 字符串.substring(开始索引, 结束索引) - 包前不包后

    • 第二个参数不写，默认到末尾

• 返回值：一个新的字符串

  • 从原先字符串里面提取出来的内容

	var str2 = 'hello world'
    
    // 从索引 1 开始, 到索引 7, 不包含索引 7
    var res2 = str2.substring(1, 7)
    console.log(res2) // ello w
    
    // 从索引 1 开始, 到末尾结束 
    var res3 = str2.substring(1)
    console.log(res3) // ello world

五、toLowerCase( )

• 作用：把字符串里面所有的大写字母转换成小写字母

• 语法：

  • 字符串.toLowerCase()

• 返回值：就是转换好的字符串

	var str = 'ABCDEFGHIJKLMN'
    var res = str.toLowerCase()
    console.log(res) // abcdefghijklmn

六、toUpperCase( )

• 作用：把字符串里面所有的小写字母转换成大写字母

• 语法：

  • 字符串.toUpperCase()

• 返回值：就是转换好的字符串

	var str2 = 'opqrstuvwxyz'
    var res2 = str2.toUpperCase()
    console.log(res2) // OPQRSTUVWXYZ

七、split( )

• 作用：按照你的要求，切割字符串

• 语法：

  • 字符串.split(‘你要切割的字符’)

    • 参数你写什么就按照什么给你切割
    • 参数你要是写一个字符串里面没有的字符, 那么给你切割出一个整个的
    • 参数要是不写, 也是切割一个整个的
    • 参数你要是写一个 空字符串(’’), 会一位一位给你切割

• 返回值：是一个数组

  • 按照你的规则切割好每一部分，都放到数组里面

	var str = '2020-05-20'
    // 用 - 把字符串分开, 每一段都作为一个数据放在数组里面
    var res = str.split('-')
    console.log(res) //  ["2020", "05", "20"]

	var str = '卧槽，js太难了，卧槽，我头发掉光了'
    var arr = str.split('卧槽') 
    console.log(arr) // ["", ",js太难了，", "，我头发掉光了"]

八、slice( )

• 作用：从字符串里面提取出一部分数据

• 语法：

  • 字符串.slice(开始索引, 结束索引) - 包前不包后

  • 字符串.slice(开始索引, 负整数)

    • 当你写负整数的时候，表示字符串.length + 负整数

• 返回值：一个字符串

  • 从原始字符串里面提取出来的一部分

 	var str = 'abcdefghijklmn'
    
    // 提取 str 字符串中索引 1 到索引 10 的字符, 不包含索引 10
    var res1 = str.slice(1, 10)
   
   // 你写 -3 等价于 str.length + -3 === 11
    var res2 = str.slice(1, -3)
    var res3 = str.slice(1, 11)
   
   	console.log(res1) // bcdefghij
    console.log(res2) // bcdefghijk
    console.log(res3) // bcdefghijk

九、concat( )

• 作用：拼接字符串

• 语法：

  • 字符串.concat(要拼接的字符串1, 要拼接的字符串2, …)

• 返回值：一个拼接好的字符串

  • 作用和**加好（+）**是一模一样的

	var str = 'hello world'
    var res = str.concat(' 你好 世界')
    console.log(res) // hello world 你好 世界

十、indexOf( )

• 作用：通过字符串，查找到对应的索引返回

• 语法：

  • 字符串.indexOf(你要查找的字符)

  • 字符串.indexOf(你要查找的字符, 从那个索引开始查找)

• 返回值：一个数字

  • 如果有这个字符，那么就返回找到的第一个字符位置的索引
  • 如果没有这个字符，那么就返回 -1

	var str = 'hello world'
    // 当你找一个多个字母的字符的时候, 会找到匹配的第一个字母的位置返回
    var res = str.indexOf('world')
    console.log(res) // 6

十一、lastIndexOf( )

• 作用：通过字符，查找到对应的索引返回，从后往前查找

• 语法：

  • 字符串.lastIndexOf(你要查找的字符)

  • 字符串.lastIndexOf(你要查找的字符, 开始的索引)

• 返回值：一个数字

  • 如果有这个字符，那么就返回找到的第一个字符位置的索引
  • 如果没有这个字符, 那么就返回 -1

	var str = 'hello world'
    var res = str.lastIndexOf('l')
    console.log(res) // 9

十二、trim( )

• 作用：除去字符串前端和末尾的空格

• 语法：

  • 字符串.trim()

• 返回值：除去前端和末尾的空格的字符串

	var str = '    hello world  '
    var res = str.trim()
    console.log(res) //hello world

十三、replace( )

• 作用：替换原始字符串的内容（只能替换一次）

• 语法：

  • 字符串.replace(‘你要替换的原始字符串的内容’, ‘把原始字符串的内容替换成什么’)

• 返回值：替换好的字符串

 	var str = '我太难了，js太难了，头发呀掉光了'
    var arr = str.split('，')
    console.log(arr) // ["我太难了", "js太难了", "头发呀掉光了"]
    var res = str.replace('js太难了','js太简单了')
    console.log(res)  // 我太难了，js太简单了，头发呀掉光了

	var str = '卧槽，js太难了，卧槽，我头发掉光了'
    var arr = str.split('，') 
    console.log(arr) // ["卧槽,js太难了", "卧槽", "我头发掉光了"]
    var res = str.replace('卧槽','哎呀')
    console.log(res) // 哎呀,js太难了，卧槽，我头发掉光了

十四、fromCharCode( )

• 作用：将 ASCLL 码 转成对应的字符

• 语法：

  • String.fromCharCode(ASCLL码)

• 返回值：unicode码中对应的字符

    var res = String.fromCharCode(114)
    console.log(res) // r

	console.log(String.fromCharCode(100)) // d