利用JS+ES6新增字符串操作方法匯總(共47種方法)
讓我為大家介紹一下字符串的操作方法吧，你知道與不知道的大部分都在這！
分類可能有點不太對，還請大家見諒！
增
1.concat()
拼接字符串 可以連接兩個或多個字符串
let str = "hello"
let str1 =" str"
console.log("hello".concat(str1)) //hello str
console.log(str.concat(str1)) //hello str
2.padStart(總長度,“填充的字符串”)
返回新的字符串，表示用參數(shù)字符串從頭部（左側(cè)）補全原字符串
let str = "hello str"
// 現(xiàn)在我們str的長度為9
// 我們限定了總長度為10 我們在字符串最前面添加 一直添加到總長度為10
// 如果未填充字符串 字符串不變
console.log(str.padStart(10,"123")) //1hello str
3.padEnd(總長度,“填充的字符串”)
返回新的字符串，表示用參數(shù)字符串從尾部（右側(cè)）補全原字符串
let str = "hello str"
// 現(xiàn)在我們str的長度為9
// 我們限定了總長度為10 我們在字符串最后面添加 一直添加到總長度為10
// 如果未填充字符串 字符串不變
console.log(str.padEnd(10, "123")) //hello str1
—————————————————————————————————————
刪
4.slice()
可以從字符串中截取指定的內(nèi)容不會影響原字符串第一個參數(shù)，開始位置的索引（包括開始位置）
第二個參數(shù)，結(jié)束位置的索引（不包含結(jié)束位置）
let str = "hello str"
// 一個參數(shù)截取后面所有的字符串
console.log(str.slice(6)) //str
console.log(str.slice(0,5)) //hello
// 也可以傳遞一個負數(shù)，負數(shù)將會從后面計算
console.log(str.slice(0,-1)) //hello st
5.substr()
截取字符串 第一個參數(shù)：截取開始位置的索引，第二個參數(shù)：截取的長度
let str = "hello str"
console.log(str.substr(0,5))//hello
console.log(str.substr(6,3))//str
6.substring()
字符串的截取 substring(開始的索引號[, 結(jié)束的索引號])
let str = "hello str"
// 當只有一個參數(shù)的時候 索引位置往后全部截取 包含索引位置
console.log(str.substring(6)) //"str"
// 當有兩個參數(shù)的時候 開始索引的位置 結(jié)束索引的位置
// 結(jié)束的索引不包含想要截取的部分
// 記住包前不包后
console.log(str.substring(6,7)) //"s"
7.trim()
清除字符串首尾的空格
let str = " hello str "
console.log(str.trim()) //"hello str"
8.trimEnd()
trimEnd() 方法從一個字符串的末端移除空白字符
let str = "hello str "
console.log(str.length) //13
console.log(str.trimEnd().length) // 9
console.log(str.trimEnd()) // hello str
9.trimRight()
trimRight() 方法從一個字符串的末端移除空白字符
let str = "hello str "
console.log(str.length) //13
console.log(str.trimRight().length) // 9
console.log(str.trimRight()) // hello str
10.trimLeft()
trimLeft() 方法從一個字符串的前端移除空白字符
let str = " hello str"
console.log(str.length) //13
console.log(str.trimLeft().length) // 9
console.log(str.trimLeft()) // hello str
11.trimStart()
trimStart() 方法從一個字符串的前端移除空白字符
let str = " hello str"
console.log(str.length) //13
console.log(str.trimStart().length) // 9
console.log(str.trimStart()) // hello str
——————————————————————————————————————————————————
改
12.split()
切割字符串轉(zhuǎn)換為數(shù)組切割后的字符串可以使用數(shù)組方法
let str = "red,orange"
console.log(str.split(",")) // ['red', 'orange']
console.log(str.split("")) //['r', 'e', 'd', ',', 'o', 'r', 'a', 'n', 'g', 'e']
12.toLocaleLowerCase()
大寫轉(zhuǎn)小寫
let str = "HELLO STR"
console.log(str.toLocaleLowerCase()) //hello str
13.toLocaleUpperCase()
小寫轉(zhuǎn)大寫
let str = "hello str"
console.log(str.toLocaleUpperCase()) //HELLO STR
14.toLowerCase()
大寫轉(zhuǎn)小寫
let str = "HELLO STR"
console.log(str.toLowerCase()) //hello str
16.toUpperCase()
小寫轉(zhuǎn)大寫
let str = "hello str"
console.log(str.toUpperCase()) //HELLO STR
17.toString()
toString()的用法有許多，我介紹跟字符串相關的用法
可以轉(zhuǎn)換數(shù)據(jù)類型為字符串型
let arr = [1]
let obj = {name:"zs"}
let num = 1
console.log(arr.toString()) // 1
console.log(typeof arr.toString()) // string
console.log(obj.toString()) // [object Object]
console.log(typeof obj.toString()) // string
console.log(num.toString()) // 1
console.log(typeof obj.toString()) // string
18.replace()
可以將字符串中指定內(nèi)容替換為新內(nèi)容第一個參數(shù)被替換的內(nèi)容第二個參數(shù)新的內(nèi)容
let str = "hello str"
console.log(str.replace("hello","hh")) //hh str
19.replaceAll()
replaceAll() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串，該函數(shù)會替換所有匹配到的子字符串。
let str = "hello str hello str"
console.log(str.replaceAll("hello","hh")) //hh str hh str
20.repeat(number)
返回新的字符串，表示將字符串重復指定次數(shù)返回
let str = "hello str"
console.log(str.repeat(2)) //hello strhello str
——————————————————————————————————————————————————
查
21.length
用來獲取字符串的長度
let str = "hello str"
console.log(str.length) //9
22.charAt()
str.charAt(index)，index是字符所在字符串的位置索引，索引從0開始
如果超過位置索引，返回 “ ”
let str = "hello str"
console.log(str.charAt(0)) //h
console.log(str.charAt(9)) //空
23.indexOf()
檢索一個字符串中是否含有指定內(nèi)容如果字符串中含有該內(nèi)容，則會返回其第一次出現(xiàn)的索引有第二個參數(shù) ，代表開始查找索引的位置沒找到指定的內(nèi)容返回-1
let str = "hello hello"
console.log(str.indexOf("h")) //0
console.log(str.indexOf("v")) //-1
//有兩個參數(shù)的時候 索引指定開始查找位置
console.log(str.indexOf("e",0)) //1
console.log(str.indexOf("h",1)) //-1
24.lastIndexOf()
檢索一個字符串中是否含有指定內(nèi)容從后往前找如果字符串中含有該內(nèi)容，則會返回其最后一次出現(xiàn)的索引有第二個參數(shù) ，代表開始查找索引的位置沒找到指定的內(nèi)容返回-1
let str = "hello hello"
console.log(str.lastIndexOf("h")) //6
console.log(str.lastIndexOf("v")) //-1
// 從下標為0的位置開始從后往前找
console.log(str.lastIndexOf("h",0)) //0
console.log(str.lastIndexOf("h",6)) //6
25.includes()
用于判斷一個字符串是否包含在另一個字符串中，根據(jù)情況返回 true 或 false。
let str = "hello str"
console.log(str.includes("hello")) //true
console.log(str.includes("str")) //true
console.log(str.includes("helo")) //false
//兩個值時 第二個值是索引 如下例 從索引1后面再開始查找
console.log(str.includes("hello",1)) //false
console.log(str.includes("ello",1)) //true
26.charCodeAt()
返回指定索引位置字符的 Unicode 值
let str = "hello str"
console.log(str.charCodeAt(0)) //104
27.formCharCode()
可以根據(jù)字符編碼去獲取字符需要通過String.fromCharCode() 去使用
console.log(String.fromCharCode(20000)) // 北
28.search()
可以搜索字符串中是否含有指定內(nèi)容如果搜索到指定內(nèi)容，則會返回第一次出現(xiàn)的索引，如果沒用搜索到返回-1也可以接收一個正則表達式作為參數(shù)，然后根據(jù)正則表達式去檢索字符串
let str = "hello str"
console.log(str.search("hello")) //0
console.log(str.search("str")) //6
console.log(str.search("v")) //-1
// 可以使用正則表達式
let str1 = "aac abc acc"
console.log(str1.search(/a[abc]c/)) //0
29.match()
可以根據(jù)正則表達式，從一個字符串中將符合條件的內(nèi)容提取出來默認情況下只會找到第一個符號要求的內(nèi)容，找到停止檢索可以設置正則表達式全局匹配返回一個數(shù)組
let str = "1a2b3c"
console.log(str.match(/[A-z]/))
console.log(str.match(/[A-z]/g))
30.at()
at() 方法用于接收一個整數(shù)值并返回該索引對應的元素，允許正數(shù)和負數(shù)。負整數(shù)從數(shù)組中的最后一個元素開始倒數(shù)。
匹配給定索引的數(shù)組中的元素。如果找不到指定的索引，則返回 undefined。
let str = "hello str"
console.log(str.at(9)) // undefined
console.log(str.at(0)) // h
console.log(str.at(-1)) // r
31.startsWith()
返回布爾值，判斷參數(shù)字符串是否在原字符串的頭部
let str = "hello str"
// h在字符串的頭部返回true
console.log(str.startsWith("h"))//true
// e不在頭部返回false
console.log(str.startsWith("e"))//false
32.endsWith()
返回布爾值，判斷參數(shù)字符串是否在原字符串的尾部
let str = "hello str"
// r在字符串的尾部返回true
console.log(str.endsWith("r")) // true
// h不在字符串的尾部返回false
console.log(str.endsWith("h")) // false
33.localeCompare()
用于比較兩個字符串
如果第一個字符串大于第二個字符串返回1
如果第一個字符串等于第二個字符串返回0
如果第一個字符串小于第二個字符串返回-1
console.log("a".localeCompare("b")) // -1
console.log("a".localeCompare("a")) // 0
console.log("b".localeCompare("a")) // 1
——————————————————————————————————————————————————
標簽類型方法
34.sub()
該方法返回加了 sub 標簽的字符串
let str = "hello str"
console.log(str.sub())
35.big()
該方法返回加了 big 標簽的字符串
let str = "hello str"
console.log(str.big())
36.bold()
該方法返回加了 b 標簽的字符串
let str = "hello str"
console.log(str.big())
37.anchor()
anchor() 方法用于創(chuàng)建 HTML 錨該方法返回加了 a 標簽的字符串
let str = "hello str"
console.log(str.anchor("url地址"))
38.blink()
blink() 方法用于顯示閃動的字符串
該方法返回加了 blink 標簽的字符串
let str = "hello str"
console.log(str.blink())
39.fixed()
fixed() 方法用于把字符串顯示為打字機字體。
該方法返回加了 tt 標簽的字符串
let str = "hello str"
console.log(str.fixed())
40.small()
該方法返回加了 small 標簽的字符串**
let str = "hello str"
console.log(str.small())
41.link()
該方法返回加了 a 標簽的字符串
let str = "hello str"
console.log(str.link("url地址"))
42.strike()
該方法返回加了 strike 標簽的字符串
let str = "hello str"
console.log(str.strike())
43.fontcolor()
fontcolor() 方法用于按照指定的顏色來顯示字符串
該方法返回加了 font 標簽的字符串
let str = "hello str"
console.log(str.fontcolor("red"))
44.fontsize()
fontsize() 方法用于按照指定的尺寸來顯示字符串。
該方法返回加了 font 標簽的字符串
let str = "hello str"
console.log(str.fontsize(12))
45.italics()
italics() 方法用于把字符串顯示為斜體。
該方法返回加了 i 標簽的字符串
let str = "hello str"
console.log(str.fontsize(12))
——————————————————————————————————————————————————
46.valueOf()
返回 String 對象的原始值:
let str = "hello str"
console.log(str.valueOf()) //hello str
47.模板字符串
ES6新增了模板字符串，讓我們拼接字符串時更方便注意:切記使用反引號作為字符串的定界符分隔的字面量
1.拼接
在我們模板字符串出現(xiàn)之前，我們想要拼接字符串是比較麻煩的
const name = "杰克";
const age = 18;
// 以前的拼接字符串
console.log("大家好,我的名字叫"+name+",我今年"+age+"歲")
現(xiàn)在我們有了模板字符串，拼接起來就會簡單許多
模板字符串使用反引號 `` 作為字符串的定界符分隔的字面量
const name = "杰克";
const age = 18;
// 模板字符串,切記使用反引號
console.log(`大家好,我的名字叫${name},我今年${age}歲`)
2.換行
以前我們用雙引號或者單引號編寫字符串時，如果出現(xiàn)一行裝不下的情況下，我們需要使用+號來拼接
const name = "杰克";
const age = 18;
// 一行裝不下我們需要用+來拼接
console.log("大家好，我的名字叫杰克"
+"今年18歲了")
現(xiàn)在我們有了模板字符串，就可以更簡單的實現(xiàn)換行遇到的問題
const name = "杰克";
const age = 18;
// 一行裝不下我們需要用+來拼接
console.log(`大家好，我的名字叫杰克
今年18歲了`)總結(jié)
到此這篇關于JS+ES6新增字符串操作方法匯總的文章就介紹到這了,更多相關JS+ES6新增字符串內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
在Web項目的開發(fā)中,js,css文件會隨著項目的開發(fā)變得越來越多,越來越大,這就給給性能方面帶來一些問題;解決該問題的一個好的方法就是合并js,css文件需要了解的朋友可以參考下2012-12-12
JS Common 2 之比較常用到的函數(shù)...2007-03-03
這篇文章主要為大家詳細介紹了原生JS發(fā)送異步數(shù)據(jù)請求的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
JavaScript+html實現(xiàn)前端頁面滑動驗證(2)
這篇文章主要為大家詳細介紹了JavaScript+html實現(xiàn)前端頁面滑動驗證的第二種方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
在開發(fā)的過程中，表格Table有個缺陷，如果一行中某個單元格的超過一行，表格就不夠美觀了。2009-04-04
這篇文章將會介紹Javascript模式中較為常見和實用的模式——單例模式，主要分為概念和實例部分。在介紹實例的同時也會對代碼中額外的知識點進行講解。有需要的朋友們可以參考借鑒。2016-10-10
用web-view?+?H5一招搞定微信小程序選不了本地文件
微信小程序提供了有限的文件系統(tǒng)接口,主要用于臨時緩存數(shù)據(jù)或保存圖片等資源,對于更復雜的文件操作需求,則需通過特定API實現(xiàn),這篇文章主要介紹了用web-view+H5一招搞定微信小程序選不了本地文件的相關資料,需要的朋友可以參考下2026-03-03
JS實現(xiàn)無限級網(wǎng)頁折疊菜單(類似樹形菜單)效果代碼
這篇文章主要介紹了JS實現(xiàn)無限級網(wǎng)頁折疊菜單(類似樹形菜單)效果代碼,涉及JavaScript基于鼠標事件實現(xiàn)針對頁面元素結(jié)點的遍歷及樣式操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
正則表達式是javascript操作字符串的一個重要組成部分，然而，在ES6中，隨著字符串操作的變更， ES6也對正則表達式進行了一些更新。本文將詳細介紹ES6正則表達式擴展2017-07-07
今天小編就為大家分享一篇關于JavaScript之解構(gòu)賦值的理解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01