辟邪劍法之字符串常用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()

一.引言

之前的博客中,有總結過常用的數組方法,獨孤九劍之數組方法

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

二.字符串

1.字符串介紹

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

字符串之間使用 + 號拼接

創建字符串的方式

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

屬性length 返回字符串的長度

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

2.ES5字符串方法

1.toLowerCase()

將整個字符串轉成小寫字母

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

2.toUpperCase()

將整個字符串轉成大寫字母

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

3.indexOf()

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

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

4.lastIndexOf()

返回字符串中子串最后出現的索引值,沒有匹配返回-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()

把一個字符串分割成字符串數組,返回新的數組 (也可以通過正則分割)

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

第一個參數指定分割的符號

第二個參數可選,為返回數組的長度

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:第二個參數如果大于分割后的數組長度,以最大數組長度的結果返回

7.substr()

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

var str = str1.substr(start,length)

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

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

8.substring()

返回字符串中介于兩個指定下標之間的子串

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

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

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

9.concat()

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

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); // 默認為0

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

12.String.fromCharCode()

根據指定編碼值,來返回字符串

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

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

13.search()

search()方法匹配成功返回字符在字符串中首次匹配項的索引,否則返回-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()功能類似,都是返回目標字符串的索引值的,但是search()的參數可以是需要檢索的子串,也可以是需要檢索的正則表達式

二者可以區別使用:

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

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

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:一般我們會用于替換某些敏感字符,或者只是單純的替換文本,第一個參數可以是字符串,也可以是正則表達式

15.match()

在字符串中匹配某個正則是否存在

返回值:如果存在,返回一個數組,數組放著匹配到的子串,如果不存在,返回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()

轉為字符串

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

• 強制轉換

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

• 進制間的轉換

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

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

  18.String()

  強制轉為字符串,所有值都能轉

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

3.ES6字符串方法

1.includes()

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

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

2.startsWith()

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

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

3.endsWith()

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

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

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

此三種方法都支持第二個參數,表示開始搜索的位置

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:上面代碼表示，使用第二個參數n時，endsWith的行為與其他兩個方法有所不同。它針對前n個字符，而其他兩個方法針對從第n個位置直到字符串結束。

5.repeat()

表示將原字符串重復n次

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

6.padStart,padEnd()

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

padStart()用于頭部補全

padEnd()用于尾部補全

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

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

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

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

padStart()常見用法:

• 為數值補全指定位數

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

• 解決時間格式不足兩位補齊的問題

  var month = 9; //padStart(2,'0') 將轉換成字符串的'9',不夠兩位時,前面加個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

除了遍歷字符串，這個遍歷器最大的優點是可以識別大于0xFFFF的碼點，傳統的for循環無法識別這樣的碼點。

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 }

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。