JavaScript字符串操作方法大全,包含ES6方法

2021-02-20 web前端開發

一、charAt()

返回在指定位置的字符。

var str="abc"console.log(str.charAt(0))
二、charCodeAt()
var str="abc" console.log(str.charCodeAt(1))
三、concat()
連接字符串。
 var a = "abc";   var b = "def";   var c = a.concat(b); console.log(c);
四、indexOf()
檢索字符串。indexOf() 方法對大小寫敏感！
var str="Hello world!"console.log(str.indexOf("Hello"))console.log(str.indexOf("World"))console.log(str.indexOf("world"))
五、match()
match() 方法可在字符串內檢索指定的值，或找到一個或多個正則表達式的匹配。該方法類似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。
var str="1 abc 2 def 3"console.log(str.match(/\d+/g))
六、replace()
replace() 方法用於在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。
var str="abc Def!"console.log(str.replace(/abc/, "CBA"))
七、search()
search() 方法用於檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串。要執行忽略大小寫的檢索，請追加標誌 i。如果沒有找到任何匹配的子串，則返回 -1。
var str="abc DEF!"console.log(str.search(/DEF/))
八、slice()
提取字符串的片斷，並在新的字符串中返回被提取的部分。
stringObject.slice(start,end);
start :要抽取的片斷的起始下標。如果是負數，則該參數規定的是從字符串的尾部開始算起的位置。也就是說，-1 指字符串的最後一個字符，-2 指倒數第二個字符，以此類推。
end：緊接著要抽取的片段的結尾的下標。若未指定此參數，則要提取的子串包括 start 到原字符串結尾的字符串。
如果該參數是負數，那麼它規定的是從字符串的尾部開始算起的位置。
var str="abc def ghk"console.log(str.slice(6))
九、split()
把字符串分割為字符串數組。
var str="abc def ghi jkl"    console.log(str.split(" "))//["abc", "def", "ghi", "jkl"]console.log(str.split("") )//["a", "b", "c", " ", "d", "e", "f", " ", "g", "h", "i", " ", "j", "k", "l"]console.log(str.split(" ",3))//["abc", "def", "ghi"]
十、toLocaleLowerCase()
把字符串轉換為小寫。
var str="ABC def!"console.log(str.toLocaleLowerCase())
十一、toLocaleUpperCase()
把字符串轉換為大寫。
var str="ABC def!"console.log(str.toLocaleUpperCase())
十二、toLowerCase()
把字符串轉換為小寫。
var str="ABC def!"console.log(str.toLowerCase())
十三、toUpperCase()
把字符串轉換為大寫。
var str="ABC def!"console.log(str.toUpperCase())
十四、substr()
從起始索引號提取字符串中指定數目的字符。
stringObject.substr(start,length)。
start：必需。要抽取的子串的起始下標。必須是數值。如果是負數，那麼該參數聲明從字符串的尾部開始算起的位置。也就是說，-1 指字符串中最後一個字符，-2 指倒數第二個字符，以此類推。
length：可選。子串中的字符數。必須是數值。如果省略了該參數，那麼返回從 stringObject 的開始位置到結尾的字串。
var str="abc def"console.log(str.substr(2))console.log(str.substr(2,4))
十五、substring()
提取字符串中兩個指定的索引號之間的字符。
stringObject.substring(start,stop)。
start ：必需。一個非負的整數，規定要提取的子串的第一個字符在 stringObject 中的位置。
stop ：可選。一個非負的整數，比要提取的子串的最後一個字符在 stringObject 中的位置多 1。如果省略該參數，那麼返回的子串會一直到字符串的結尾。
var str="abc def"console.log(str.substring(2))console.log(str.substring(2,4))
相同點：如果只是寫一個參數，兩者的作用都一樣：都是是截取字符串從當前下標以後直到字符串最後的字符串片段。
substr(startIndex);
substring(startIndex);
var str = '123456789';console.log(str.substr(2));    console.log(str.substring(2)) ;
不同點：第二個參數
substr（startIndex,lenth）：第二個參數是截取字符串的長度（從起始點截取某個長度的字符串）；
substring（startIndex, endIndex）：第二個參數是截取字符串最終的下標 （截取2個位置之間的字符串,『含頭不含尾』）。
console.log("123456789".substr(2,5));    console.log("123456789".substring(2,5)) ;
ES6新增的操作字符串的方法一、codePointAt()
let s = '𠮷a';s.codePointAt(0) s.codePointAt(1) s.codePointAt(2) 
codePointAt方法的參數，是字符在字符串中的位置（從 0 開始）。
上面代碼中，JavaScript 將「𠮷a」視為三個字符，codePointAt 方法在第一個字符上，正確地識別了「𠮷」，返回了它的十進位碼點 134071（即十六進位的20BB7）。
在第二個字符（即「𠮷」的後兩個字節）和第三個字符「a」上，codePointAt方法的結果與charCodeAt方法相同。
二、String.fromCodePoint()
ES5 提供String.fromCharCode方法，用於從碼點返回對應字符，但是這個方法不能識別 32 位的 UTF-16 字符（Unicode 編號大於0xFFFF）。
String.fromCharCode(0x20BB7)
上面代碼中，String.fromCharCode不能識別大於0xFFFF的碼點，所以0x20BB7就發生了溢出，最高位2被捨棄了，最後返回碼點U+0BB7對應的字符，而不是碼點U+20BB7對應的字符。
ES6 提供了String.fromCodePoint方法，可以識別大於0xFFFF的字符，彌補了String.fromCharCode方法的不足。
在作用上，正好與codePointAt方法相反。
String.fromCodePoint(0x20BB7)String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y'
三、字符串的遍歷器接口 for of
for (let codePoint of 'abc') {  console.log(codePoint)}
除了遍歷字符串，這個遍歷器最大的優點是可以識別大於0xFFFF的碼點，傳統的for循環無法識別這樣的碼點。
四、at（）
at方法可以識別Unicode 編號大於0xFFFF的字符，返回正確的字符。
五、normalize()
許多歐洲語言有語調符號和重音符號。為了表示它們，Unicode 提供了兩種方法。一種是直接提供帶重音符號的字符，比如Ǒ（u01D1）。
另一種是提供合成符號（combining character），即原字符與重音符號的合成，兩個字符合成一個字符，比如O（u004F）和ˇ（u030C）合成Ǒ（u004Fu030C）。
這兩種表示方法，在視覺和語義上都等價，但是 JavaScript 不能識別。
'\u01D1'==='\u004F\u030C' '\u01D1'.length '\u004F\u030C'.length 
上面代碼表示，JavaScript 將合成字符視為兩個字符，導致兩種表示方法不相等。
ES6 提供字符串實例的normalize()方法，用來將字符的不同表示方法統一為同樣的形式，這稱為 Unicode 正規化。
'\u01D1'.normalize() === '\u004F\u030C'.normalize()
六、includes(), startsWith(), endsWith()
傳統上，JavaScript 只有indexOf方法，可以用來確定一個字符串是否包含在另一個字符串中。ES6 又提供了三種新方法。
**includes()**：返回布爾值，表示是否找到了參數字符串。**startsWith()**：返回布爾值，表示參數字符串是否在原字符串的頭部。**endsWith()**：返回布爾值，表示參數字符串是否在原字符串的尾部。let s = 'Hello world!';    s.startsWith('Hello') s.endsWith('!') s.includes('o') 
這三個方法都支持第二個參數，表示開始搜索的位置。
let s = 'Hello world!';    s.startsWith('world', 6) s.endsWith('Hello', 5) s.includes('Hello', 6) 
上面代碼表示，使用第二個參數n時，endsWith的行為與其他兩個方法有所不同。它針對前n個字符，而其他兩個方法針對從第n個位置直到字符串結束。
七、repeat()
repeat方法返回一個新字符串，表示將原字符串重複n次。
'x'.repeat(3) 'hello'.repeat(2) 'na'.repeat(0) 
參數如果是小數，會被取整。
如果repeat的參數是負數或者Infinity，會報錯。
'na'.repeat(Infinity)'na'.repeat(-1)
八、padStart()，padEnd()
ES2017 引入了字符串補全長度的功能。如果某個字符串不夠指定長度，會在頭部或尾部補全。padStart()用於頭部補全，padEnd()用於尾部補全。
'x'.padStart(5, 'ab') 'x'.padStart(4, 'ab') 
'x'.padEnd(5, 'ab') 'x'.padEnd(4, 'ab') 
上面代碼中，padStart和padEnd一共接受兩個參數，第一個參數用來指定字符串的最小長度，第二個參數是用來補全的字符串。
如果原字符串的長度，等於或大於指定的最小長度，則返回原字符串。
'xxx'.padStart(2, 'ab') 'xxx'.padEnd(2, 'ab') 
如果用來補全的字符串與原字符串，兩者的長度之和超過了指定的最小長度，則會截去超出位數的補全字符串。
'abc'.padStart(10, '0123456789')
如果省略第二個參數，默認使用空格補全長度。
'x'.padStart(4) 'x'.padEnd(4) 
padStart的常見用途是為數值補全指定位數。下面代碼生成 10 位的數值字符串。
'1'.padStart(10, '0') '12'.padStart(10, '0') '123456'.padStart(10, '0') 
另一個用途是提示字符串格式。
'12'.padStart(10, 'YYYY-MM-DD') '09-12'.padStart(10, 'YYYY-MM-DD') 
九、matchAll()
matchAll方法返回一個正則表達式在當前字符串的所有匹配。
十、字符串模板
模板字符串（template string）是增強版的字符串，用反引號（`）標識。它可以當作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。字符串模板，工作中用到比較多。
`In JavaScript '\n' is a line-feed.`
`In JavaScript this is not legal.`
console.log(`string text line 1string text line 2`);
let name = "Bob", time = "today";`Hello ${name}, how are you ${time}?`
上面代碼中的模板字符串，都是用反引號表示。如果在模板字符串中需要使用反引號，則前面要用反斜槓轉義。
let greeting = `\`Yo\` World!`;
如果使用模板字符串表示多行字符串，所有的空格和縮進都會被保留在輸出之中。
$('#list').html(`<ul>  <li>first</li>  <li>second</li></ul>`);
上面代碼中，所有模板字符串的空格和換行，都是被保留的，比如<ul>標籤前面會有一個換行。如果你不想要這個換行，可以使用trim方法消除它。
$('#list').html(`<ul>  <li>first</li>  <li>second</li></ul>`.trim());
模板字符串中嵌入變量，需要將變量名寫在${}之中。
function authorize(user, action) {  if (!user.hasPrivilege(action)) {    throw new Error(                                          `User ${user.name} is not authorized to do ${action}.`);  }}
大括號內部可以放入任意的 JavaScript 表達式，可以進行運算，以及引用對象屬性。
let x = 1;let y = 2;
`${x} + ${y} = ${x + y}`
`${x} + ${y * 2} = ${x + y * 2}`
let obj = {x: 1, y: 2};`${obj.x + obj.y}`
模板字符串之中還能調用函數。
function fn() {  return "Hello World";}    `foo ${fn()} bar`
如果大括號中的值不是字符串，將按照一般的規則轉為字符串。比如，大括號中是一個對象，將默認調用對象的toString方法。
如果模板字符串中的變量沒有聲明，將報錯。
let msg = `Hello, ${place}`;
由於模板字符串的大括號內部，就是執行 JavaScript 代碼，因此如果大括號內部是一個字符串，將會原樣輸出。
模板字符串甚至還能嵌套。
const tmpl = addrs => `  <table>  ${addrs.map(addr => `    <tr><td>${addr.first}</td></tr>    <tr><td>${addr.last}</td></tr>  `).join('')}  </table>`;
PS: 文中ES6的內容，主要來自於阮一峰的《ES6標準入門》。

相關焦點

  • JS中字符串常見幾種的方法
    這篇文章主要介紹了Javascript字符串常用方法詳解的相關資料,在平時工作中經常會用到的，非常不錯，需要的朋友可以參考下。1：charAt()方法charAt()返回字符串中x位置的字符，下標從 0 開始。<!
  • JavaScript中常用es6語法整理總結
    2.模板字符串（Template String）用一對反引號（`模板字符串`）標識 ，它可以當普通字符串使用（'普通字符串'），也可以用來定義多行字符串 ，在模板字符串中可以嵌入變量 ，js表達式或函數等 ，變量，js表達式或函數需要寫在${}中
  • 20個常用的JavaScript字符串方法
    如果找到)返回字符串中搜索到的字符或子字符串的索引。12. substr(start, [length])substr() 方法可在字符串中抽取從 start 下標開始的指定數目的字符。返回一個新的字符串，包含從 start（包括 start 所指的字符） 處開始的 length 個字符。如果沒有指定 length，那麼返回的字符串包含從 start 到該字符串的結尾的字符。
  • 10個很棒的 JavaScript 字符串技巧
    如果字符串太短，則需要填充剩餘空間，直到達到指定的長度為止。過去，主要還是使用庫 left-pad。 但是，今天我們可以使用padStart和SpadEnd方法，選擇哪種方法取決於是在字符串的開頭還是結尾填充字符串。3.如何將字符串拆分為字符數組有多種方法可以將字符串分割成字符數組，我更喜歡使用擴展操作符(...)
  • JavaScript字符串所有API全解密
    截止ES6，字符串共包含31個標準的API方法，其中有些方法出鏡率較高，需要摸透原理；有些方法之間相似度較高，需要仔細分辨；甚至有些方法執行效率較低，應當儘量少的使用。下面將從String構造器方法說起，逐步幫助你掌握字符串。
  • C sharp 編程基礎之字符串及字符串提供的各種方法解析
    字符串的簡要概述二、字符串提供的各種方法在 C# 語言中提供了對字符串類型數據操作的方法，例如截取字符串中的內容、查找字符串中的內容等。在任何一個軟體中對字符串的操作都是必不可少的，掌握好字符串的操作將會在編程中起到事半功倍的作用。下面將分別來介紹常見的字符串操作、數據類型的轉換，以及字符串操作在實際工作中的應用。1、Length獲得當前字符串中字符的個數。
  • 學習Scratch字符串操作——「說反話」與「成語大全」
    上周給小朋友們講「運算符」中的字符串操作。在計算機編程中，字符算操作有著很廣泛的應用，有很多函數庫幫助我們輕鬆地完成各種字符串運算。而在Scratch2.0中，只有以下三個基本的積木塊，從字面上很容易理解它們的含義。看似簡單，可是小朋友們千萬別忽視字符串操作的作用哦。
  • 對比python字符串函數,學習pandas的str矢量化字符串函數
    2）函數講解① find()函數功能 ：檢測字符串是否包含指定字符。如果包含指定字符，則返回開始的索引；否則，返回-1。② index()函數功能 ：檢測字符串是否包含指定字符。如果包含指定字符，則返回開始的索引；否則，提示ValueError錯誤。
  • 對比python字符串函數,輕鬆學習pandas的 str 矢量化字符串函數
    2）函數講解① find()函數功能 ：檢測字符串是否包含指定字符。如果包含指定字符，則返回開始的索引；否則，返回-1。② index()函數功能 ：檢測字符串是否包含指定字符。如果包含指定字符，則返回開始的索引；否則，提示ValueError錯誤。
  • String字符串常用方法
    1、IndexOf方法：確定指定字符串在字符串中的索引，如果在字符串中找到指定字符，則返回其索引，否則返回-1。
  • JavaScript中RegExp對象的基本語法、修飾符、量詞、元字符的應用
    基本語法在JavaScript中，使用RegExp表示正則表達式對象，這個表達式對象要比使用字面量還要強大，這也是對正則表達式操作的一個封裝，封裝成方法後更容易使用。現在，我們使用RegExp()方法實現一個字符串匹配，JavaScript代碼如下：<script type="text/javascript">var reg1 = new RegExp("Hello[A-Z]", "i"); var s
  • 在JavaScript中,使用replace()、test()和exec()方法匹配字符串
    JavaScript正則表達式注意：使用replace()方法只能將字符串中第一個被匹配到的字符串替換掉。第2個參數是最終要替換為的新字符串。該方法的功能是將第1個參數匹配到的值替換為第2個參數的值。返回的結果就是替換後的新字符串。
  • Pandas向量化字符串操作
    ，但這些方法只能處理單個字符串，處理一個序列的字符串時，需要用到循環。那麼，有沒有辦法，不用循環就能同時處理多個字符串呢，pandas的向量化操作就提供了這樣的方法。向量化的操作使我們不必擔心數組的長度和維度，只需要關係操作功能，尤為強大的是，除了支持常用的字符串操作方法，還集成了正則表達式的大部分功能，這使得pandas在處理字符串列時，具有非常大的魔力。
  • 淺談Java中字符串的初始化及字符串操作類
    配合反編譯代碼驗證字符串初始化操作.相信看到這裡, 再見到有關的面試題, 你已經無所畏懼了, 因為你已經懂得了背後原理。回到題目, 也就是說字符串常量表中沒有存儲"hello world"的引用, 當s4以引號的形式聲明字符串時, 由於在字符串常量池中查不到相應的引用, 所以會在堆內存中新創建一個字符串對象. 所以s3和s4指向的不是同一個字符串對象, 結果為false。詳解字符串操作類明白了字符串常量池, 我相信關於字符串的創建你已經有十足的把握了.
  • 8個簡單的JavaScript字符串方法
    這是一個系列時的文章，今天我們開始字符串的學習。因此，事不宜遲，讓我們開始吧。1、lengthlength屬性返回字符串中包含空格的字符數。3、Replacereplace（）方法將指定的值替換為字符串中的另一個值。
  • Python進行數據的排序以及字符串的操作
    你甚至還可以只對DataFrame對象的一部分進行排序操作。它將生成一個數組，只包含特定索引範圍的數據。例如我們這裡的2～4。隨機取樣上面剛講了如何通過指定排列次序，從DataFrame對象中抽取一部分數據。
  • Swift字符串和字符
    創建和操作字符串的語法與 C的操作方式相似，輕量並且易讀。字符串連接操作只需要簡單地通過 + 號將兩個字符串相連即可。與 Swift 中其他值一樣，能否更改字符串的值，取決於其被定義為常量還是變量。儘管語法簡易，但 String 類型是一種快速、現代化的字符串實現。每一個字符串都是由獨立編碼的 Unicode 字符組成，並提供了用於訪問這些字符在不同的Unicode表示的支持。
  • Python中字符串的操作處理
    學習了字符串的基本用法和簡單格式化，我們再來看一下常用字符串類型的操作。對字符串，Python提供了3個基本的操作符，如下表：演示如下：>>> x = '一個'>>> y = '字符串'>>> x+y'一個字符串'>>> x*3'一個一個一個'>>> s = '某個字符串'>>>
  • 探秘JavaScript中的六個字符
    如果我們添加一個正負前綴符號,JavaScript會假定我們希望為數值形式表示,如果可能的話,對我們來說並將字符串轉換為一個數字。如果我們添加一個否定符號，JavaScript會將將字符串轉換為一個布爾值。我們可以使用Javascript中[,],(,),! and +這六個符號寫一些神奇的代碼。