javascript字符串及其常用方法详解

最新推荐文章于 2025-01-17 09:19:19 发布

原创最新推荐文章于 2025-01-17 09:19:19 发布 · 167 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript基础专栏收录该内容

18 篇文章

订阅专栏

本文深入讲解了JavaScript中字符串的基本概念及各种操作方法，包括字符串的创建、转换、检索、拼接、截取等功能，帮助读者全面掌握字符串处理技巧。

字符串

字符串的特点

ECMAScitpt中的字符串是不可变的，字符串一旦创建，他的只就不能改变。要改变某个变量保存的字符串，首先要销毁原来的字符串，然后再用另一个包含新值的字符串填充该变量

转换为字符串

toString( ) 数值、布尔值、对象和字符串值都有一个toString方法。但null和undefined没有这个方法

var num = 10;
console.log(num.toString())   //'10'
console.log(num.toString(2))   //'1010'
console.log(num.toString(8))   //'12'
console.log(num.toString(10))   //'10'
console.log(num.toString(16))   //'A'

String( ) 在不知道是否是null或者undefined时可以使用

如果值有toString方法，则调用该方法并且返回结果值
如果值是null，则返回‘null’
如果值是undefined，则返回‘undefined’

var value1 = 10;
var value2 = true;
var value3 = null;
var value4 ;
console.log(String(value1)); //'10'
console.log(String(value2)); //'true'
console.log(String(value3)); //'null'
console.log(String(value4)); //'undefined'

创建字符串

字面量创建
```
str = ‘hello world’;
```
new关键字创建
```
str = new String('hello world');
```

length 每一个字符串都有一个length属性表示字符串中包含多少字符
```
str = 'hello world';
console.log(str.length)  //11
```
字符方法
- charAt( 字符串的索引 ) 以单字符串形式返回指定位置的那个字符
```
var str = 'hello world'
console.log(str.chatAt(1))  //返回索引1处的字符  e
```
- charCodeAt( 字符串的索引 ) 返回该索引位置字符的的编码
```
var str = 'hello world';
console.log(str.chatCodeAt(1))  //返回编码值 101
```
- concat( 任意个字符串 ) 拼接字符串，返回拼接好的新字符串，+号比concat简单易行
  - 可以接收任意多个字符串不改变原始字符串

连接数组时，先将数组转化为字符串

var str = 'hello ';
console.log(str.concat('world'));  //'hello world'
console.log(str.concat('world','!'))  //'hello world!'

var str = '123';
console.log(str.concat(['aaa','bbb'])) //123aaa,bbb
console.log('123' + ['aaa', 'bbb']);  //123aaa,bbb

slice( 开始位置索引，结束位置索引可有可无 ) 支持负值（加上字符串长度）取值范围包左不包右
- 返回被截取的字符串不改变原始字符串
- 负值与字符串长度相加即可
```
var str = 'hello world';
```

console.log(str.slice(3))  //'lo world'
 console.log(str.slice(3,7))  //'lo w'
console.log(str.slice(-3))   //'orld'
 console.log(str.slice(3,-4))  //'lo w'
 ```

 
 - ##### substring( 开始位置索引 ，结束位置索引可有可无 )  subString会将所有的负值都转换成0
 
   - 返回被截取的字符串  不改变原始字符串
 
   ```javascript
   var str = 'hello world';
console.log(str.substring(3))  //'lo world'
   console.log(str.substring(3,7))  //'lo w'
console.log(str.substring(-3))   //'hello world'
   console.log(str.substring(3,-4))  //'' 空字符串
   console.log(str.substring(4,2)) == console.log(str.substring(2,4))//'ll'

substr( 开始位置索引，要截取的字符串长度 )
- 将负的第一个参数加上字符串长度，第二个负的参数转换成0
- 返回被截取的字符串不改变原始字符串

var str = 'hello world';
 console.log(str.substr(3))  //'lo world'
console.log(str.substr(3,7))  //'lo worl'
 console.log(str.substr(-3))   //'lo world'
 console.log(str.substr(3,-4))  //'' 空字符串
 ```

indexOf( 字符串，开始位置 ) 和lastIndexOf( 字符串，开始位置 ) 第二个参数可以选填
- indexOf从左往右依次寻找，返回子字符串的位置，如果没有找到则返回-1
- lastIndexOf从右往左依次寻找，没有找到返回-1
- 仅仅返回第一次找到的子字符串的位置

var str = 'hello world';
 console.log(str.indexOf('o'))  //4
console.log(str.lastIndexOf('o'))  //7
 console.log(str.indexOf('o',4))   //9
 console.log(str.lastIndexOf('o',4))  //3
 ```

trim( ) 删除前置和后缀的所有空格，返回删除之后的字符串，不改变原始数组
- trimLeft( ) trimStart() 删除前缀空格
- trimRight( ) trimEnd() 删除后缀空格
```
    var str = '   hello world   ';
  console.log(str.trim())   //'hello world'
     consoloe.log(str.trimLeft())   //'hello world   '
     console.log(str.trimRight())    //'    hello world'
```
- toUpperCase( ) 和 toLowerCase( ) 转换字符串的大小写不改变原始字符串
  - toLocaleUpperCase
  - toLocaleLowerCase 针对特定地区
```
  var str = 'Hello World';
console.log(str.toUpperCase())  //'HELLO WORLD'
  console.log(str.toLowerCase())  //'hello world'
```
- search( 字符串或正则表达式 ) 返回字符串中第一个匹配项的索引，如果没有找到匹配项，则返回-1
  - 始终是从开头向后查询支持正则表达式
```
  var text = 'cat, bat, sat, fat';
var pos = text.search(/at/);
console.log(pos)    //1
```

replace( 字符串或者正则表达式，字符串或者函数)

替换字符串，返回替换好的新字符串
不改变原始字符串

   
  var str = 'cat, bat, sat, fat';
     var res1 = str.replace('at','ond');
  console.log(res1); // 'cond, bat, sat, fat'
     var res2 = str.replace(/at/g,'ond');
     console.log(res2);  //'cond, bond, sond, fond'

split( 字符串或RegExp对象，指定数组大小 )
- 可以基于指定分隔符将一个字符串分割成多个字符串，并将结果存放到一个数组中
- 指定数组大小以便确保返回的数组不会超过既定大小
- 不改变原始字符串
```
  var str = 'red,blue,green,yellow';
var color1 = str.split(',');  
console.log(color1);  //['red','blue','green','yellow']
var color2 = str.split(',', 2);
console.log(color2);  //['red','blue']
```

includes( 字符串，起始位置) 判断是否有该字符没有起始位置默认总开头

var str = 'red,blue,green,yellow';
var res = str.includes('l',5) 
console.log(res) //17

padStart( 目标长度，字符串) 补齐字符串把字符串补充到某种长度返回补充好的字符串

padEnd( 目标长度，字符串 )

var str = '1234'
    var res = str.padStart(3, 'a')
    console.log(res) //1234
    var res = str.padStart(10,'a')//aaaaaa1234

match( 要查找的字符 ) 正则表达式专用查找方法

var str = 'abcdefg';
console.log(str.match('a'))
//["a", index: 0, input: "abcdefg", groups: undefined]
0: "a"
groups: undefined
index: 0
input: "abcdefg"
length: 1
__proto__: Array(0)