JavaScript _ 字符串

雨季mo浅忆

已于 2023-02-16 14:36:57 修改

阅读量2k

点赞数 3

分类专栏：前端 JavaScript 文章标签：前端 javascript

于 2021-08-20 20:20:20 首次发布

本文链接：https://blog.csdn.net/weixin_58099903/article/details/119828732

版权

前端同时被 2 个专栏收录

158 篇文章 29 订阅

订阅专栏

JavaScript

30 篇文章 0 订阅

订阅专栏

11. trimStart( ) / trimLeft( )

12. trimEnd( ) / trimRight( )

JavaScript _ 字符串

1、初识字符串

字符串 :
+ 字符串是一个 JS 内的 基本数据类型
+ 同时也是一个包装数据类型
+ 在 JS 内用 单引号 或者 双引号 包裹的内容就叫做字符串
包装数据类型
+ 在浏览器中存储的时候, 是按照 基本数据类型 的形式进行存储
+ 当你使用它的一瞬间, 会马上转化成 复杂数据类型 的形式让你使用
+ 等你使用完毕, 会瞬间转换成基本数据类型的形式进行存储
字符串的创建方式
1. 字面量方式创建
=> 语法:
-> var str = 'hello world'
-> var str = "hello world"
// 1. 字面量方式创建 字符串
var str1 = 'hello world'
var str2 = "hello world"
console.log(str1)	// hello world
console.log(str2)	// hello world
console.log(str1 === str2)	// true
2. 内置构造函数创建
=> 语法: var str = new String('hello world')
+ 两种创建方式创建出来的字符串一模一样
=> 在使用上没有任何区别
=> 在存储上也没有任何区别
// 2. 内置构造函数创建 字符串
var str3 = new String('hello world')
var str4 = new String('hello world')
console.log(str3)	// String {"hello world"}
console.log(str4)	// String {"hello world"}
console.log(str1 + 100)	// hello world100
console.log(str2 + 100)	// hello world100
console.log(str3 + 100)	// hello world100
console.log(str4 + 100)	// hello world100

console.log(str1 == str3)	// true
console.log(str1 === str3)	// false
console.log(str2 == str3)	// true
console.log(str2 === str3)	// false

console.log(str3 == str4)	// false
console.log(str3 === str4)	// false

console.log(typeof str1); //string
console.log(typeof str2); //string
console.log(typeof str3); //object
console.log(typeof str4); //object

console.log(str1 == str2 == str3) // false ( string == string 为true , true != object )
String( )是 JS 的内置对象之一。new String( )每调用一次，不管其字符串值是否相等，是否有必要创建新对象，都会创建一个新的对象。

执行 var str3 = new String('hello world') ; 通过用 new( ) 新建一个对象，存放于 堆内存 中。然后栈中创建引用变量 str3 ，并且存放堆中对象的地址，指向该对象。

由于隐式类型转换的原因，所以 str1 == str3 结果是 true ，但 str1 === str3 结果是 false 。

同理 , 执行 var str4 = new String('hello world') , 会再次new一个新的对象，存放于堆内存中。每调用一次就会创建一个新的对象。然后栈中创建引用变量str4，存放堆中再次创建的对象的地址，指向新建的对象。

所以 str3 和 str4 存放的是不同的 堆地址 ，指向不同的对象。地址值不一样，所以两次判断都是 false 。

2、字符串的基本操作

1. 字符串有一个 length 属性
+ 是一个只读的属性, 只能获取不能设置
+ 读:
   => 语法: 字符串.length
+ 得到: 该字符串的长度
   => 获取到的就是该字符串的长度, 也就是字符串有多少个字符组成
   => 注意: 字符串内的空格也是占用一个字符长度的
   => 一个中文也是一个字符长度
// 1. length 属性
// 读取 str 的 length
var str = 'hello world'
console.log(str.length)	// 11
// 设置 str 的 length => 尝试修改, 不能修改
str.length = 100 // 设置没有意义
console.log(str)	// hello world
console.log(str.length)	// 11
2. 字符串有一个索引属性
+ 是一个只读的属性, 只能获取不能设置
+ 读:
   => 语法: 字符串[索引]
+ 得到: 该索引位置的数据
   => 获取到的就是该字符串指定索引位置的那一位字符
   -> 如果字符串有该索引位置, 那么就是该索引位置的字符
   -> 如果字符串没有该索引位置, 那么就是空字符串 undefined
+ 索引: 从 0 开始, 依次 +1
// 2. 索引属性
// 使用索引读取文本
var str = 'hello world'
console.log(str[4])	// o
// 尝试修改 => 使用索引设置
str[4] = 'z'
console.log(str)	// hello world
console.log(str[4])	// o
3. 遍历字符串
+ 使用 for 循环进行遍历字符串
+ 因为字符串的索引是一组有规律的数字
+ 循环可以提供一组有规律的数字
// 3. 遍历字符串
var str = 'hello world'
for (var i = 0; i < str.length; i++) {
  console.log(str[i])
}

3、字符集 - ASCII 编码

+ ASCII 读做 : as key

+ 其实就是一个文字和二进制的对照表
=> 每一个文本的存储, 其实都是以二进制的形式存储在硬盘内
=> a 这个文本存成什么样的二进制
=> 约定一个对照表, 不同的文本内容, 对应一个固定的二进制数字
+ 因为最早的计算机是美国人发明的
=> 最早的计算机对照变只有 128 个字符
+ 把这 128 个字符的序号的编码一一对应起来, 发布一个规则
=> 出现了一个对照表, 这个对照表就叫做 ASCII 编码字符集对照表

每一个字符的编码
+ 每一个计算机可以识别的字符编了一个序号
+ 每一个序号都能对应的转换成二进制数据
=> 假设编号是 1, 0001
=> 假设编号是 2, 0010
=> 假设编号是 3, 0011
=> 假设编号是 4, 0100
+ 在计算机存储的时候, 就是按照二进制数字进行存储
=> 当你使用各种软件打开文件的时候
=> 计算机会自动把二进制转换成你需要识别的内容

万国码 / 统一码
+ unicode 编码
+ 也是一个对照表, 大型的对照表
+ 前 128 个和 ASCII 编码一样
+ 从 128 个以后, 开始加入了全世界各个国家的文字
+ 在网络上传递, 因为是全世界通用
+ 每一个文字都有对应的二进制数字编码
+ 有一种 unicode 的变种编码, 是一个八位的 unicode 编码
=> web 统一了一个编码格式
+ 取名叫做 UTF-8 专门用于 web 应用
+ 针对中国, 有一个为我们自己的编码叫做 GBK
国标编码 :
+ GBK
+ 前 128 个是 ASCII 编码
+ 后面的都是中文
+ 适用于中国人编码

编码的乱码 ?
+ 我目前这个文件是按照 utf-8 格式存储的
+ 假设我存储了一个 "中" 字, 编号存储的 20000
+ 如果我换成 GBK 格式打开文件, 编号 20000 不一定是 "中"
+ 它把 20000 转换成文本就是另外一个文字了

4、字符串常用方法

+ 字符串常用方法为什么会出现 ?
=> 因为字符串并不好操作
+ 字符串常用方法的统一语法
=> 字符串.xxx( )
+ 注意: 所有字符串常用方法, 都不会改变原始字符串, 都是以返回值的形式出现结果

1. toLowerCase( )

=> 语法: 字符串.toLowerCase( )
=> 作用: 把字符串内的所有字母转换成小写
=> 返回值: 转换好的字符串

2. toUpperCase( )

=> 语法: 字符串.toUpperCase( )
=> 作用: 把字符串内的所有字母转换成大写
=> 返回值: 转换好的字符串
// 1. toLowerCase()
var str = 'heLlO WoRld'
console.log('原始字符串 : ', str)
var res = str.toLowerCase()
console.log('返回值 : ', res)//返回值 :  hello world
// 2. toUpperCase()
var str = 'heLlO WoRld'
console.log('原始字符串 : ', str)
var res = str.toUpperCase()
console.log('返回值 : ', res)//返回值 :  HELLO WORLD
3. charAt( )

=> 语法: 字符串.charAt(索引)
=> 作用: 找到字符串中该索引位置所表示的字符
=> 返回值: 该索引位置的对应字符
-> 如果有该索引位置, 那么就是该索引位置的字符
-> 如果没有该索引位置, 那么就是空字符串 ''

4. charCodeAt( )

=> 语法: 字符串.charCodeAt(索引)
=> 作用: 找到字符串中该索引位置对应字符的编码(unicode 编码)十进制
// 3. charAt()
var str = 'hello world'
console.log('原始字符串 : ', str)
var res = str.charAt(4)//返回值 :  o
console.log('返回值 : ', res)
// 4. charCodeAt()
var str = 'hello world'
console.log('原始字符串 : ', str)
var res = str.charCodeAt(4)
console.log('返回值 : ', res)//返回值 :  111
5. substr( )

=> 语法: 字符串.substr(开始索引, 多少个)
=> 作用: 截取字符串
=> 返回值: 截取出来的字符串

6. substring( )

=> 语法: 字符串.substring(开始索引, 结束索引)
->特点 : 包前不包后
=> 作用: 截取字符串
=> 返回值: 截取出来的字符串
// 5. substr()
console.log('substr(2, 7)')
var str = 'hello world'
console.log('原始字符串 : ', str)
// 表示从 [2] 开始向后截取 7 个字符
var res = str.substr(2, 7)
console.log('返回值 : ', res)//返回值 :  llo wor
// 6. substring()
console.log('substring(2, 7)')
var str = 'hello world'
console.log('原始字符串 : ', str)
// 表示从 [2] 截取到 [7], 包含 [2] 不包含 [7]
var res = str.substring(2, 7)
console.log('返回值 : ', res)//返回值 :  llo w
7. slice( )

=> 语法: 字符串.slice(开始索引, 结束索引)
-> 包前不包后
-> 可以填写负整数
=> 作用: 截取字符串
=> 返回值: 截取出来的字符串
// 7. slice()
console.log('slice(2, 7)')
var str = 'hello world'
console.log('原始字符串 : ', str)
// 表示从 [2] 截取到 [7], 包含 [2] 不包含 [7]
var res = str.slice(2, -4)
console.log('返回值 : ', res)//返回值 :  llo w
8. split( )

=> 语法: 字符串.split('分隔符号')
-> 可以不传递, 会把完整字符串当做一个整体
-> 传递一个空字符串(''), 会一位一位的切割
=> 作用: 把字符串按照分隔符号分割开,成为一段一段的内容,放在一个数组里面
=> 返回值: ** 是一个 数组数据类型 **
-> 里面存放的内容就是按照分隔符分开的每一部分的内容
// 8. split()
var str = '2021-08-20-hello-世界'
console.log('原始字符串 : ', str)
var res = str.split('-')
console.log('返回值 : ', res)
9. replace( )

=> 语法: 字符串.replace('换下字符', '换上字符')
=> 作用: 进行字符串替换
-> 使用换上字符, 把原始字符串内的换下字符替换掉
=> 注意: 如果字符串内有多个换下字符, 只能替换第一个
=> 返回值: 替换好的字符串
// 9. replace()
var str = 'hello world'
console.log('原始字符串 : ', str)
// 换下和换上字符, 不一定只能写一个字符
var res = str.replace('rl', '☆★☆')
console.log('返回值 : ', res)//返回值 :  hello wo☆★☆d
10. trim( )

=> 语法: 字符串.trim( )
=> 作用: 去除字符串首尾的空白内容
=> 返回值: 去除空白内容以后的字符串
// 10. trim()
var str = '  abcd  '
console.log('原始字符串 : ', str)
console.log('原始字符串 : ', str.length)
var res = str.trim()
console.log('返回值 : ', res)
console.log('返回值 : ', res.length)
11. trimStart( ) / trimLeft( )

=> 语法:
-> 字符串.trimLeft( )
-> 字符串.trimStart( )
=> 作用: 去除字符串前面的空白内容
=> 返回值: 去除前面空白内容以后的字符串
// 11. trimLeft() / trimStart()
var str = '  abcd  '
console.log('原始字符串 : ', str)
console.log('原始字符串 : ', str.length)
// 去除前面的空白
// var res = str.trimLeft()
var res = str.trimStart()
console.log('返回值 : ', res)
console.log('返回值 : ', res.length)
=>

12. trimEnd( ) / trimRight( )

=> 语法:
-> 字符串.trimRight( )
-> 字符串.trimEnd( )
=> 作用: 去除字符串后面的空白内容
=> 返回值: 去除后面空白内容以后的字符串
// 12. trimRight() / trimEnd()
var str = '  abcd  '
console.log('原始字符串 : ', str)
console.log('原始字符串 : ', str.length)
// 去除后面的空白
// var res = str.trimRight()
var res = str.trimEnd()
console.log('返回值 : ', res)
console.log('返回值 : ', res.length)
13. concat( )

=> 语法: 字符串.concat(字符串)
=> 作用: 字符串拼接
=> 返回值: 拼接好的字符串
// 13. concat()
var str = 'hello world'
console.log('原始字符串 : ', str)
var res = str.concat('你好 世界')
var res = str + '你好 世界'
console.log('返回值 : ', res)//返回值 :  hello world你好 世界
14. indexOf( )

=> 语法:
-> 字符串.indexOf('字符串片段')
-> 字符串.indexOf('字符串片段', 开始索引)
=> 作用: 查找该字符串片段在原始字符串中出现第一次的索引位置
=> 返回值:
-> 如果有该字符内容, 那么就是该字符对应的索引位置
-> 如果没有该字符内容, 就是 -1

15. lastIndexOf( )

=> 语法:
-> 字符串.lastIndexOf('字符串片段')
-> 字符串.lastIndexOf('字符串片段', 开始索引)
=> 作用: 从后向前查找字符串片段在原始字符串中出现第一次的索引位置
=> 返回值:
-> 如果有该字符内容, 那么就是该字符对应的索引位置
-> 如果没有该字符内容, 就是 -1
// 14. indexOf()
var str = 'hello world'
console.log('原始字符串 : ', str)
var res = str.indexOf('l')
var res = str.indexOf('l', 5)
console.log('返回值 : ', res)//返回值 :  9
// 15. lastIndexOf()
var str = 'hello world'
console.log('原始字符串 : ', str)
// var res = str.lastIndexOf('l')
var res = str.lastIndexOf('l', 5)
console.log('返回值 : ', res)//返回值 :  3

ES6新增数组方法（注意浏览器兼容）

includes( )

数组、字符串都可以使用此方法。

总结

我个人认为 , includes 方法好就好在 , 它返回的是一个 Boolean 布尔值 ,

这样在项目中使用时 , 直接用 if ( 返回的值就可以了 ) ,

相较于 indexOf 方法用起来十分方便。

但各有各的好 , indexOf 方法在其他场景比如配合 splice 方法

删除元素时就挺好用的。

json 格式字符串 :

+ 我们把所有被引号包裹的内容都叫做字符串
+ 因为字符串填充的内容不一样, 我们做了一些细致分类
=> 全部由数组字符串: 数字字符串
   -> '123456789'
=> 带有 html 格式的字符串: html 格式字符串
   -> '<p>abcd</p>'
=> 查询字符串格式
   -> key=value&key=value
   -> 'name=zhangsan&password=123456&gender=男'
=> json 格式字符串
   -> '{ "name": "Jack", "age": 18 }'
   -> key 和 value 必须使用双引号包裹, 纯数字和布尔值可以不用

把 js 的数据类型转换成 json 格式
+ 语法: JSON.stringify(要转换的 js 的数据类型)
+ 返回值: json 格式字符串
把 json 格式转换成 js 的数据类型
+ 语法: JSON.parse(json 格式字符串)
+ 返回值: js 的数据类型
+ 注意:
=> 如果你的小括号内填写的不是一个 json 格式的字符串, 会报错
// 1. js 转换成 json 格式
var obj = { name: 'Jack', age: 18, gender: '男' }
console.log(obj)
var str = JSON.stringify(obj)
console.log(str)// {"name":"Jack","age":18,"gender":"男"}
// 2. json 格式转化昵称 js
var str = '{"name":"Jack","age":18,"gender":"男"}'
console.log(str)
var obj = JSON.parse(str)
console.log(obj)

5、图例

雨季mo浅忆

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
JavaScript _ 字符串

JavaScript _ 字符串目录1、初识字符串2、字符串的基本操作3、字符集 -ASCII 编码4、字符串常用方法1. toLowerCase( )2. toUpperCase( )3. charAt( )4. charCodeAt( )5. substr( )6. substring( )7. slice( )8. split( )9. replace( )10. trim( )11. trimStart( ) / trimLeft( )12. trimEnd( )
复制链接

扫一扫

专栏目录