Js字符串操作方法汇总

1.字符方法

charAt()、charCodeAt()

var str="hello world";
console.log(str.charAt(1));//e
console.log(str.charCodeAt(1));//101

2.字符串操作方法

  1. concat(实践中一般使用+操作符)
var str="hello ";
var res=str.concat("world");
console.log(res);//hello world
  1. slice方法、substring方法、substr方法

slice和数组中的方法类似。

  • slice方法:第一个参数指定子字符串开始位置,第二个参数表示子字符串最后一个字符后面的位置
  • substring方法:第一个参数指定子字符串开始位置,第二个参数表示子字符串最后一个字符后面的位置
  • substr方法:第一个参数指定子字符串开始位置,第二个参数表示返回的字符个数
var str="hello world";

console.log(str.slice(3));//lo world
console.log(str.substring(3));//lo world
console.log(str.substr(3));//lo world

console.log(str.slice(3,7));//lo w  7表示子字符串最后一个字符后面的位置,简单理解就是包含头不包含尾
console.log(str.substring(3,7));//lo w
console.log(str.substr(3,7));//lo worl 7表示返回7个字符

console.log(str.slice(3,-4));//lo w  -4+11=7表示子字符串最后一个字符后面的位置  简单理解就是包含头不包含尾
console.log(str.substring(3,-4)); // hel  会转换为console.log(str.substring(3,0)); // 此外由于这个方法会将较小数作为开始位置,较大数作为结束位置,所以相当于调用console.log(str.substring(0,3));
console.log(str.substr(3,-4)); // ""空字符串
console.log(str.substring(3,0)); // hel

3.字符串位置方法

indexOf方法和lastIndexOf方法都是从一个字符串中搜索给定的子字符串,然后返回子字符串的位置,如果没有找到,则返回-1indexOf方法是从字符串的开头向后搜索子字符串,lastIndexOf方法正好相反这两个方法都可以接收两个参数:要查找的子字符串和查找的位置

var str="hello world";

console.log(str.indexOf("o"));//4
console.log(str.lastIndexOf("o"));//7
console.log(str.indexOf("o",6));//7
console.log(str.lastIndexOf("o",6));//4

4.trim方法

trim方法用来删除字符串前后的空格

var str="   hello world   ";
console.log('('+str.trim()+')');//(hello world)
console.log('('+str+')');//(   hello world   )

5.字符串大小写转换方法

toLowerCase()、toUpperCase()、toLocaleLowerCase()、toLocaleUpperCase()
对有些地区来说,针对地区的方法与其通用方法得到的结果相同,但少数语言,如土耳其语,会为unicode大小写转换应用特殊的规则,这时候必须使用针对地区的方法来保证实现正确的转换。

var str="HELLO world";
console.log(str.toLowerCase());//hello world
console.log(str.toUpperCase());//HELLO WORLD

6.字符串正则匹配方法

  • match方法:只接受一个参数,由字符串或RegExp对象指定的一个正则表达式
  • search方法:只接受一个参数,由字符串或RegExp对象指定的一个正则表达式,search方法返回字符串中第一个匹配项的索引,如果没有匹配项,返回-1
  • replace方法:接受两个参数,第一个参数可以是一个正则对象或一个字符串。
  • split方法:split方法是基于指定的字符,将字符串分割成字符串数组,当指定的字符为空字符串时,将会分隔整个字符串
var str="cat,bat,sat,fat";
var pattern=/.at/;
var matches=str.match(pattern);
console.log(matches.index); // 0
console.log(matches[0]); // cat

var pos=str.search(/at/);
console.log(pos);//1 1表示at字符串在原来字符串中第一次出现的位置
var str="cat,bat,sat,fat";
var res=str.replace("at","one");//第一个参数是字符串,所以只会替换第一个子字符串
console.log(res);//cone,bat,sat,fat
  
var res1=str.replace(/at/g,"one");//第一个参数是正则表达式,所以会替换所有的子字符串
console.log(res1);//cone,bone,sone,fone
var str="red,blue,green,yellow";
console.log(str.split(","));//["red", "blue", "green", "yellow"]
console.log(str.split(",",2));//["red", "blue"]  第二个参数用来限制数组大小
console.log(str.split(/[^\,]+/));// ["", ",", ",", ",", ""]
//第一项和最后一项为空字符串是因为正则表达式指定的分隔符出现在了子字符串的开头,即"red"和"yellow"

7.localeCompare方法

这个方法用于比较两个字符串
1.如果字符串在字母表中应该排在字符串参数之前,则返回一个负数
2.如果字符串等于字符串参数,则返回0
3.如果字符串在字母表中应该排在字符串参数之后,则返回一个正数

var str="yellow";
console.log(str.localeCompare("brick"));//1
console.log(str.localeCompare("yellow"));//0
console.log(str.localeCompare("zoo"));//-1

8.fromCharCode方法

fromCharCode方法是接收一或多个字符编码,然后将其转换为字符串,fromCharCode方法是String构造函数的一个静态方法

console.log(String.fromCharCode(104,101,108,108,111));//hello

ES6新增方法

includes(), startsWith(), endsWith()

  • includes():返回布尔值,表示是否找到了参数字符串。
  • startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。
  • endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。
var s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

这三个方法都支持第二个参数,表示开始搜索的位置。

var s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

上面代码表示,使用第二个参数n时,endsWith的行为与其他两个方法有所不同。它针对前n个字符,而其他两个方法针对从第n个位置直到字符串结束。

repeat()

repeat方法返回一个新字符串,表示将原字符串重复n次。

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

padStart(),padEnd()

ES7推出了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart用于头部补全,padEnd用于尾部补全。

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

模板字符串

$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);
posted @ 2021-05-21 17:29  chillylight  阅读(515)  评论(0编辑  收藏  举报