辟邪劍法之字符串常用API

文章目錄

• • 辟邪劍法之字符串常用API
  • • 一.引言
    • 二.字符串
    • • 1.字符串介紹
      • 2.ES5字符串方法
      • • 1.toLowerCase()
        • 2.toUpperCase()
        • 3.indexOf()
        • 4.lastIndexOf()
        • 5.slice()
        • 6.split()
        • 7.substr()
        • 8.substring()
        • 9.concat()
        • 10.charAt()
        • 11.charCodeAt()
        • 12.String.fromCharCode()
        • 13.search()
        • 14.replace()
        • 15.match()
        • 16.trim()
        • 17.toString()
        • 18.String()
      • 3.ES6字符串方法
      • • 1.includes()
        • 2.startsWith()
        • 3.endsWith()
        • 4.includes(),startsWith(),endsWith()
        • 5.repeat()
        • 6.padStart,padEnd()
        • 7.trimStart()、trimEnd()
      • 4.遍歷字符串方法
      • • 1.for...of
        • 2.for()

一.引言

之前的博客中,有總結(jié)過常用的數(shù)組方法,獨(dú)孤九劍之?dāng)?shù)組方法

那操作字符串的,為什么要我要稱之為辟邪劍法?據(jù)我以往的工作經(jīng)驗(yàn),我們用的最多的字符串方法,無外乎一個(gè)"割"字,基本上都是分割字符串,下面我們來介紹下常用的字符串方法.

二.字符串

1.字符串介紹

JavaScript的字符串就是用單引號'' 或 雙引號"" 括起來的字符

字符串之間使用 + 號拼接

創(chuàng)建字符串的方式

• var str1='123456' 通常使用這種方式創(chuàng)建
• var str2 = new String('123456')

屬性length 返回字符串的長度

比如:str1.length; //6,我們也可以根據(jù)索引返回字符串中的某個(gè)字符串str1[0], str1[1]

2.ES5字符串方法

1.toLowerCase()

將整個(gè)字符串轉(zhuǎn)成小寫字母

var str1="ABcdefGHIG"; console.log(str1.toLowerCase());//abcdefghig

2.toUpperCase()

將整個(gè)字符串轉(zhuǎn)成大寫字母

var str1="ABcdefGHIG"; console.log(str1.toUpperCase());//ABCDEFGHIG

3.indexOf()

返回字符串中子串第一處出現(xiàn)的索引值,沒有匹配返回-1

var str1="ABcdefGHIG"; console.log(str1.indexOf('d'));//3 console.log(str1.indexOf('k'));//-1

4.lastIndexOf()

返回字符串中子串最后出現(xiàn)的索引值,沒有匹配返回-1

var str1="liuqiaoqiao"; console.log(str1.lastIndexOf('i'));//8 console.log(str1.lastIndexOf('k'));//-1

5.slice()

從已有字符串中提取部分字符,返回新的字符串

var str = str1.slice(start,end)

slice()返回的子串包括start處的字符,但不包括end處的字符

var str1 = "擼起袖子加油干"; //slice()返回的子串包括start處的字符,但不包括end處的字符 console.log(str1.slice(4,6));//加油

6.split()

把一個(gè)字符串分割成字符串?dāng)?shù)組,返回新的數(shù)組 (也可以通過正則分割)

var str = str1.split('分割符',length)

第一個(gè)參數(shù)指定分割的符號

第二個(gè)參數(shù)可選,為返回?cái)?shù)組的長度

var str1 = "liuqiao,zhangsan,xiaoming,xiaohong"; console.log(str1.split(','));//["liuqiao", "zhangsan", "xiaoming", "xiaohong"] console.log(str1.split(',', 2));//["liuqiao", "zhangsan"]//正則分割字符串 var str = "how are Are ARE you"; var box = /are/i; var arr = str.split(box); console.log(arr); //["how ", " ", " ", " you"]

ps:第二個(gè)參數(shù)如果大于分割后的數(shù)組長度,以最大數(shù)組長度的結(jié)果返回

7.substr()

返回一個(gè)從指定位置開始的指定長度的子串

var str = str1.substr(start,length)

參數(shù)start必須,字符串的起始位置,length參數(shù)可選,截取字符串的長度

var str1 = "擼起袖子加油干"; console.log(str1.substr(4,2));//加油

8.substring()

返回字符串中介于兩個(gè)指定下標(biāo)之間的子串

var str = str1.substring(start,end);

包含start處的字符，不包含end處的字符

var str1 = "擼起袖子加油干"; //包含start處的字符，不包含end處的字符 console.log(str1.substring(4,6));//加油

9.concat()

將兩個(gè)或多個(gè)字符串組合起來,返回一個(gè)新的字符串

var str1 = "擼起"; var str2 = "袖子"; var str3 = "加油干"; console.log(str1.concat(str2, str3)); //擼起袖子加油干 console.log(str1 + str2 + str3); //擼起袖子加油干

ps: 一般拼接字符串我們不會使用這種方法,通過+連接難道不香嗎?

10.charAt()

返回指定索引位置的字符

var str1 = "擼起袖子加油干"; console.log(str1.charAt(4));//加

11.charCodeAt()

指定索引處字符的編碼值(ASCII)

var ascii = str.charCodeAt(index); // 默認(rèn)為0

var str1 = "aA0Zz"; console.log(str1.charCodeAt());//97 默認(rèn)為0 console.log(str1.charCodeAt(1));//65 console.log(str1.charCodeAt(2));//48

12.String.fromCharCode()

根據(jù)指定編碼值,來返回字符串

String.fromCharCode(num1,num2,num3......)

console.log(String.fromCharCode(97, 65, 48)); //aA0 console.log(String.fromCharCode(65, 66, 67));//ABC

13.search()

search()方法匹配成功返回字符在字符串中首次匹配項(xiàng)的索引,否則返回-1

var newStr = str.search('abc');

var str1 = "ABcdefGHIG"; console.log(str1.indexOf('def'));//3 console.log(str1.search('d'));//3 console.log(str1.search('k'));//-1 console.log(str1.search(/e/));//4

PS:search()方法與indexOf()功能類似,都是返回目標(biāo)字符串的索引值的,但是search()的參數(shù)可以是需要檢索的子串,也可以是需要檢索的正則表達(dá)式

二者可以區(qū)別使用:

• 當(dāng)只是需要檢索一個(gè)字符串時(shí),可以使用indexOf(),系統(tǒng)資源消耗更小,效率更高.
• 當(dāng)要查找某些特征的字符串(例如查找以a開頭,后面都是數(shù)字的字符串)indexOf()無法辦到,此時(shí)就要考慮使用search()和正則了

通常我們使用時(shí),并不是為了知道該子串在字符串中的具體位置,而是為了判斷子串是否存在于這個(gè)字符串中,如果不存在則返回-1,如果存在,則返回相應(yīng)位置索引

14.replace()

用于在字符串中用一些字符替換另外一些字符,返回替換后的字符串

var newStr = str.replace('abc','替換abc');

var newStr = str.replace('敏感字', function (str){ ... return '**'; })

var str1 = "擼起袖子加油干,好好加油!"; console.log(str1.replace('加油', '就是'));//擼起袖子就是干,好好加油! //正則 console.log(str1.replace(/加油/, '就是'));//擼起袖子就是干,好好加油! //全局替換 console.log(str1.replace(/加油/g, '就是'));//擼起袖子就是干,好好就是! console.log(str1.replace(/加油/g, function (str) {return "**";}) ); //擼起袖子**干,好好**!

PS:一般我們會用于替換某些敏感字符,或者只是單純的替換文本,第一個(gè)參數(shù)可以是字符串,也可以是正則表達(dá)式

15.match()

在字符串中匹配某個(gè)正則是否存在

返回值:如果存在,返回一個(gè)數(shù)組,數(shù)組放著匹配到的子串,如果不存在,返回null

var str = "how are Are ARE you"; var reg = /are/ig; console.log(str.match(reg)); //["are", "Are", "ARE"]

16.trim()

去除首位空格

var str1=" abc de "; console.log(str1.trim());//abc de

17.toString()

轉(zhuǎn)為字符串

這個(gè)toString()有很多種用法,但是不能轉(zhuǎn)null和undefined

• 強(qiáng)制轉(zhuǎn)換

var num=123456; console.log(num.toString());//123456 console.log(true.toString( )); // 'true' console.log((123).toString( )); // '123'

• 進(jìn)制間的轉(zhuǎn)換

  在javaScript中進(jìn)制之間的轉(zhuǎn)換提供了兩個(gè)非常好用的方法：toString()、parseInt()。

  //使用 toString() 方法把十進(jìn)制轉(zhuǎn)為其他進(jìn)制： var x = 28;// 10進(jìn)制 console.log(x.toString(2)); //把十進(jìn)轉(zhuǎn)為2進(jìn)制 11100 console.log(x.toString(8));//把十進(jìn)轉(zhuǎn)為8進(jìn)制 34 console.log(x.toString(16));//把十進(jìn)轉(zhuǎn)為16進(jìn)制 1c//使用 parseInt() 方法把其他進(jìn)制轉(zhuǎn)為十進(jìn)制： var x = "110";//二進(jìn)制的字符串 console.log(parseInt(x, 2));//把這個(gè)字符串當(dāng)做二進(jìn)制，轉(zhuǎn)為十進(jìn)制 6 var x = "070";//八進(jìn)制的字符串 console.log(parseInt(x, 8));//把這個(gè)字符串當(dāng)做八進(jìn)制，轉(zhuǎn)為十進(jìn)制 56 var x = "0x1c";//十六進(jìn)制的字符串 console.log(parseInt(x, 16));//把這個(gè)字符串當(dāng)做十六進(jìn)制，轉(zhuǎn)為十進(jìn)制 28

  18.String()

  強(qiáng)制轉(zhuǎn)為字符串,所有值都能轉(zhuǎn)

  console.log(String(null));//"null" console.log(String(undefined));//"undefined" console.log(String(true));//"true" console.log(String(123));//"123"

3.ES6字符串方法

1.includes()

返回布爾值,表示是否找到了參數(shù)字符串

var str1 = "liuqiao"; console.log(str1.includes('qiao'));//true console.log(str1.includes()); //false

2.startsWith()

返回布爾值,表示參數(shù)字符串是否在原字符串的頭部

var str1 = "liuqiao"; console.log(str1.startsWith('liu'));//true console.log(str1.startsWith('qiao')); //false

3.endsWith()

返回布爾值,表示參數(shù)字符串是否存在源字符串的尾部

var str1 = "liuqiao"; console.log(str1.endsWith('liu'));//false console.log(str1.endsWith('qiao')); //true

4.includes(),startsWith(),endsWith()

此三種方法都支持第二個(gè)參數(shù),表示開始搜索的位置

var str1 = "liuqiao"; console.log(str1.includes('qiao',3));//true console.log(str1.startsWith('qiao',3));//true console.log(str1.endsWith('qiao',3));//falseconsole.log(str1.endsWith('liu',3));//true

PS:上面代碼表示，使用第二個(gè)參數(shù)n時(shí)，endsWith的行為與其他兩個(gè)方法有所不同。它針對前n個(gè)字符，而其他兩個(gè)方法針對從第n個(gè)位置直到字符串結(jié)束。

5.repeat()

表示將原字符串重復(fù)n次

console.log("liu".repeat(3));//"liuliuliu" //默認(rèn)為0 console.log("liu".repeat());//"" console.log("liu".repeat(0));//"" //如果是小數(shù),則取整 console.log("liu".repeat(2.6));//"liuliu"

6.padStart,padEnd()

這是ES2017引入的字符串補(bǔ)全長度的功能.如果某個(gè)字符串不夠指定長度,會在頭部或尾部補(bǔ)全.

padStart()用于頭部補(bǔ)全

padEnd()用于尾部補(bǔ)全

console.log(`qiao`.padStart(9,'liu'));//liuliqiao console.log(`qiao`.padEnd(9,'liu'));//qiaoliuli

上面代碼中，padStart()和padEnd()一共接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是字符串補(bǔ)全生效的最大長度，第二個(gè)參數(shù)是用來補(bǔ)全的字符串。

如果用來補(bǔ)全的字符串與原字符串，兩者的長度之和超過了最大長度，則會截去超出位數(shù)的補(bǔ)全字符串。

console.log('abc'.padStart(10, '0123456789'));// '0123456abc'

padStart()常見用法:

• 為數(shù)值補(bǔ)全指定位數(shù)

  '1'.padStart(10, '0') // "0000000001" '12'.padStart(10, '0') // "0000000012" '123456'.padStart(10, '0') // "0000123456"

• 解決時(shí)間格式不足兩位補(bǔ)齊的問題

  var month = 9; //padStart(2,'0') 將轉(zhuǎn)換成字符串的'9',不夠兩位時(shí),前面加個(gè)0,輸出就是09,解決日期如:2020-09-22的問題 var newMonth = month.toString().padStart(2, '0'); //輸出09 console.log(newMonth);

7.trimStart()、trimEnd()

ES2019對字符串新增的去除首,尾空格的方法,與trim()效果差不多

trimStart() 去除頭部空格

trimEnd() 去除尾部空格

var str1 = " abc de "; console.log(str1.trim());//'abc de' console.log(str1.trimStart());//'abc de ' console.log(str1.trimEnd());//' abc de'

4.遍歷字符串方法

1.for…of

除了遍歷字符串，這個(gè)遍歷器最大的優(yōu)點(diǎn)是可以識別大于0xFFFF的碼點(diǎn)，傳統(tǒng)的for循環(huán)無法識別這樣的碼點(diǎn)。

for (let i of "abc") {console.log(i);//依次打印 a b c }

2.for()

var str1 = "abc"; for (let index = 0; index < str1.length; index++) {console.log(str1[index]);//依次打印 a b c }

總結(jié)

以上是生活随笔為你收集整理的辟邪剑法之字符串常用API的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。