前端js常用字元串處理實例(前端字元串常用方法)

本文目錄一覽:

《web前端筆記7》js字元—獲取、查找、遍歷、提取、替換方法總結

(1)字元串就是零個或多個排在一起的字元。

(2)放在單引號或雙引號之中。 ‘abc’ “abc”。

(3)單引號字元串的內部,可以使用雙引號。

(4)雙引號字元串的內部,可以使用單引號。

(5)反引號“ :反引號允許跨行。

反引號允許字元串跨越多行並可以使用

${…} 在字元串中嵌入表達式。

(1)charAt 方法返回指定位置的字元,參數是從0開始編號的位置。

找一個字元串中的某個位置是那個字元串。

charCodeAt:返回字元串指定位置的 Unicode 碼點(十進位表示)

(2)[]

字元串可以被視為字元串數組,因此可以用數組的方括弧運算符,用來返回某個位置的字元

但是字元串只是數組的相似性而已實際上、沒辦法改變字元串中的某個字元

length 只是返回了字元串的長度,該屬性沒辦法改變

字元串使用Unicode字符集,js內部所有的都是Unicode表示的。

JavaScript中的字元串使用的是 UTF-16 編碼。

toLowerCase() 和 toUpperCase()方法可以改變大小寫。

String對象是js原生提供的三個包裝對象之一。用來生成字元串對象。

(1)構造函數

字元串對象是一個類數組對象,很像數組,但不是真正的數組。

(2)將任意的值轉成字元

用於連接兩個字元串,返回一個新字元串,不改變原字元串。

從原字元串取出子字元串並返回,不改變原字元串。

它的第一個參數是子字元串的開始位置,

第二個參數是子字元串的結束位置(不含該位置)。

如果省略第二個參數,則表示子字元串一直到原字元串結束。

用於從原字元串取出子字元串並返回,不改變原字元串,跟slice方法很相像。

它的第一個參數表示子字元串的開始位置,

第二個位置表示結束位置(返回結果不含該位置)

如果省略第二個參數,則表示子字元串一直到原字元串結束。

區別:slice 和 substring的區別?

slice:

如果參數是負值,表示從結尾開始倒數計算的位置,即該負值加上字元串長度。

如果第一個參數大於第二個參數(正數情況下),slice()方法返回一個空字元串。

substring:

如果第一個參數大於第二個參數,substring方法會自動更換兩個參數的位置。

如果參數是負數,substring方法會自動將負數轉為0。

由於這些規則違反直覺,因此不建議使用substring方法,應該優先使用slice。

總結:獲取子字元串,使用 slice 或 substring。

用於確定一個字元串在另一個字元串中第一次出現的位置,

返回結果是匹配開始的位置。如果返回-1,就表示不匹配。

indexOf方法還可以接受第二個參數,表示從該位置開始向後匹配。

lastIndexOf

lastIndexOf方法的用法跟indexOf方法一致,主要的區別是lastIndexOf從尾部開始匹配,indexOf則是從頭部開始匹配。

總結:查找子字元串時,使用 indexOf 或 includes/startsWith/endsWith 進行簡單檢查。

endsWith 用來判斷當前字元串是否是以另外一個給定的子字元串「結尾」的,根據判斷結果返回 true 或 false。

用於去除字元串兩端的空格,返回一個新字元串,不改變原字元串。

toLowerCase方法用於將一個字元串全部轉為小寫,

toUpperCase則是全部轉為大寫。

它們都返回一個新字元串,不改變原字元串

split方法按照給定規則分割字元串,返回一個由分割出來的子字元串組成的數組。

如果分割規則為空字元串,則返回數組的成員是原字元串的每一個字元。

如果省略參數,則返回數組的唯一成員就是原字元串。

split方法還可以接受第二個參數,限定返回數組的最大成員數。

返回一個新字元串,表示將原字元串重複n次。

字元串補全長度的功能。如果某個字元串不夠指定長度,

會在頭部或尾部補全。padStart()用於頭部補全,padEnd()用於尾部補全。

trimStart()消除字元串頭部的空格,

trimEnd()消除尾部的空格。

返回一個由替換值(replacement)替換部分或

所有的模式(pattern)匹配項後的新字元串。

模式可以是一個字元串或者一個正則表達式,

替換值可以是一個字元串或者一個每次匹配都要調用的回調函數。

如果pattern是字元串,則僅替換第一個匹配項.

web前端筆記4-有講 如果感興趣、請參考之前文章

JS字元串截取常用方法

字元串截取常用的幾種方法:

start:  必需。非負的整數,(第一個元素的索引為 0)。

stop: 可選。一個非負的整數,比要提取的子串的最後一個字元在 stringObject 中的位置多 1。

如果不傳,那麼返回到字元串的結尾。

 let str = ‘helloword’;

str.substring(1,5);  //  ‘ello’

    截取字元串從第2位字元開始截取到第6位(包括第2位,不包括第6位)共四個字元

str.substring(2,-5); // ‘he’

    實際上是substring(2,0),負數都轉換為0, substring 總是把較小的數作為起始位置

    相當於 substring(0,2) 從第一位開始截取到第三位(包括第一位,不包括第三位)

 str.substring(2);//lloword

    只傳一個參數則以傳遞的位數位為起點截取到字元串的結尾

start: 起始位置,(第一個元素的索引為 0)。

length: 要截取得長度

str.substr(1,5); // ellow

    從第2位開始截取長度為5的字元串

str.substr(-3,2); //or

    從倒數第三位開始向後截取兩位

str.substr(1); //elloword

    第二個參數不傳測截取到字元串的最後

start :   整數,指定從哪裡開始選擇(第一個元素的索引為 0)。

end:  整數,指定結束選擇的位置

str.slice(1,3)// el

從第二位截取到第三位  共兩個字元  不包含結束位置的第四位

str.slice(1) // elloword

第二個參數不傳則截取到字元的最後一位,

str.slice(-1);  //d

傳負數則從字元的結尾開始截取字元

js字元串拆分?

字元串的拆分可以使用函數:split(),功能:使用一個指定的分隔符把一個字元串分割存儲到數組

例子:

str=”jpg|bmp|gif|ico|png”;

arr=theString.split(“|”);

//arr是一個包含字元值”jpg”、”bmp”、”gif”、”ico”和”png”的數組

擴展資料

其他的截取函數的知識點

1、函數:substring()

(1)定義:substring(start,end)表示從start到end之間的字元串,包括start位置的字元但是不包括end位置的字元。

(2)功能:字元串截取,比如想從”MinidxSearchEngine”中得到”Minidx”就要用到substring(0,6)

(3)例子:

var src=”images/off_1.png”;alert(src.substring(7,10));//彈出值為:off

2、函數:substr()

(1)定義:substr(start,length)表示從start位置開始,截取length長度的字元串。

(2)功能:字元串截取

(3)例子:

var src=”images/off_1.png”;alert(src.substr(7,3));//彈出值為:off

參考資料來源:MDN web docs 官方網站-函數

js中字元串的常見方法

首先創建一個字元串,創建字元串的方法有兩種:

1.字面量:var str = “abc123efg456”;

2.構造函數:var str = newString(“abc123efg456”);

其次,需要注意的是,javascript的字元串是不可變的,String類定義的方法都不可以改變字元串內容。若是需要通過方法改變字元串的內容,需要將返回值重新賦值給原來的字元串。如:str = str.toUpperCase();

下面,介紹比較常用的字元串的方法:

var str = “1abc123abc456abc”;

功能:返回指定的字元串值在字元串中首次出現的位置。

參數:s為要檢索的字元,必需;n為可選的字元參數,規定字元串檢索的位置。

demo:

var index1 = str.indexOf(“a”);

var index2 =str.indexOf(“a”,8);

var index3 =str.indexOf(“a”,14);

console.log(index1); // 1

console.log(index2); // 13

console.log(index3); // -1  從檢索的位置檢索不到字元,返回-1

功能:返回一個指定的字元串值最後出現的位置,在一個字元串中的指定位置從後向前搜索。

參數:s為要檢索的字元,必需;n為可選的字元參數,規定字元串檢索的位置。

demo:

var index1 =str.lastIndexOf(“a”); 

var index2 =str.lastIndexOf(“a”,11);

var index3 =str.lastIndexOf(“a”,0);

console.log(index1); // 13

console.log(index2); // 7

console.log(index3); // -1  從檢索的位置檢索不到字元,返回-1

功能:返回指定位置的字元。

參數:n表示字元串中某個位置的索引,不寫默認為第0個字元。

demo:

var s = str.charAt(3);

console.log(s);  // c

功能:返回指定位置的字元的Unicode編碼。

參數:n表示字元串中某個位置的索引,可以沒有參數,默認是索引為0的參數。

demo:

var s = str.charCodeAt(3);

console.log(s);  // 99

注:c的unicode編碼為99。

注意:charAt(n)方法和charCodeAt(n)方法類似,前者返回的是字元,後者返回的是字元的unicode編碼。

功能:將編碼轉成字元方法。

參數:十進位和十六進位,不支持unicode編碼。

demo:

var s1 =String.fromCharCode(“0x56fd”);

var s2 = String.fromCharCode(22269);

console.log(s1);   //國

console.log(s2);  //國

注:「國」的十六進位編碼是56fd,十進位是22269。

功能:根據指定位置,截取子串,從m到n,不包括n。

參數:m,n為索引。

demo:

var s = str.slice(2,7);

console.log(s); // bc123

功能:根據指定位置,截取子串,從m到n,不包括n。

參數:m,n為索引。

demo:

var s = str.substring(2,7);

console.log(s); // bc123

功能:根據指定位置,截取子串,從m位置取,共取n個。

參數:m,n為索引。

demo:

var s = str.substr(2,7);

console.log(s); // bc123ab

功能:字元串替換。

參數:oldstr為需要被替換的字元,newstr為替換的字元。

demo:

var s =str.replace(“a”,”l”);

console.log(s); // 1lbc123abc456abc

注意:每次只能替換一個符合條件的字元。

功能:分割字元,返回成為數組。

參數:”s”為分割的字元。

demo1:

var arr1 = str.split(“b”);

console.log(arr1);  // [“1a”, “c123a”,”c456a”, “c”]

demo2:

var arr2 = str.split(); //[“1abc123abc456abc”]

console.log(arr2);

demo3:

var arr3 = str.split(“”);

console.log(arr3); // [“1″,”a”, “b”, “c”, “1”, “2”,”3″, “a”, “b”, “c”, “4”,”5″, “6”, “a”, “b”, “c”]

注意:參數不寫的時候,返回原字元串組成的數組;參數為空字元的時候,將每個字元分割,返回一個數組

功能:檢索字元串中指定的子字元串,返回第一個與字元串匹配的索引值。

參數:需要被檢索的字元串。

demo:

var s1= str.search(“abc”);

var s2 = str.search(“efg”);

console.log(s1); // 1

console.log(s2); // -1

注:如果沒有找到任何匹配的子串,則返回-1。

功能:在字元串內檢索指定的值,匹配到就返回指定的字元值。

參數:需要被檢索的字元串。

demo:

var s1= str.match(“abc”);

var s2 = str.match(“efg”);

console.log(s1); // [“abc”,index: 1, input: “1abc123abc456abc”, groups: undefined]

console.log(s2); // null

注:該方法類似indexOf()和lastIndexOf(),但是它返回指定的值,沒有就返回null

功能:連接兩個或多個字元串,返回連接後的字元串。

參數:需要連接的字元串。

demo:

var str1=”abc “;

var str2=”123″;

console.log(str1.concat(str2));   // “abc 123”

提示:如果需要拼接字元串,用運算符「+」更簡單。

功能:把字元串轉換為小寫。

參數:無

demo:

var str = “ABC abc”;

console.log(str.toLowerCase()); // abcabc

功能:把字元串轉換為大寫。

參數:無

demo:

var str = “ABC abc”;

console.log(str.toUpperCase()); // ABCABC

功能:把字元串顯示為大號字體。

參數:無

demo:

var s = str.big();

document.write(str+””);

document.write(s);

功能:把字元串顯示為小號字。

參數:無

demo:

var s = str.small();

document.write(str+””);

document.write(s);

功能:把字元串顯示為粗體。

參數:無

demo:

var s = str.bold();

document.write(str+””);

document.write(s);

功能:把字元串顯示為斜體。

參數:無

demo:

var s = str.italics();

document.write(str+””);

document.write(s);

功能:將字元以指定的顏色顯示。

參數:顏色名(red)、RGB 值(rgb(255,0,0))或者十六進位數(#FF0000)。

demo:

var s = str.fontcolor(“red”);

document.write(str+””);

document.write(s);

功能:將字元以指定的字型大小顯示。

參數:size參數必須是從1和7之間的數字,1表示小的字型大小,7表示最大的字型大小。

demo:

var s = str.fontsize(7);

document.write(str+””);

document.write(s);

功能:把字元串顯示為超鏈接。

參數:鏈接的URL。

demo:

var s =str.link(“”);

document.write(str+””);

document.write(s);

功能:把字元串加字元串顯示。

參數:無

demo:

var s = str.strike();

document.write(str+””);

document.write(s);

以上是對字元串方法的整理,如有修改、補充,後續會更新。

文中如果紕漏,錯誤,不合理,描述不清晰,不準確等問題,歡迎大家留言指正…

原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-tw/n/247507.html

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
小藍的頭像小藍
上一篇 2024-12-12 13:21
下一篇 2024-12-12 13:21

相關推薦

  • Python字元串寬度不限制怎麼打代碼

    本文將為大家詳細介紹Python字元串寬度不限制時如何打代碼的幾個方面。 一、保持代碼風格的統一 在Python字元串寬度不限制的情況下,我們可以寫出很長很長的一行代碼。但是,為了…

    編程 2025-04-29
  • 解決.net 6.0運行閃退的方法

    如果你正在使用.net 6.0開發應用程序,可能會遇到程序閃退的情況。這篇文章將從多個方面為你解決這個問題。 一、代碼問題 代碼問題是導致.net 6.0程序閃退的主要原因之一。首…

    編程 2025-04-29
  • ArcGIS更改標註位置為中心的方法

    本篇文章將從多個方面詳細闡述如何在ArcGIS中更改標註位置為中心。讓我們一步步來看。 一、禁止標註智能調整 在ArcMap中設置標註智能調整可以自動將標註位置調整到最佳顯示位置。…

    編程 2025-04-29
  • Python創建分配內存的方法

    在python中,我們常常需要創建並分配內存來存儲數據。不同的類型和數據結構可能需要不同的方法來分配內存。本文將從多個方面介紹Python創建分配內存的方法,包括列表、元組、字典、…

    編程 2025-04-29
  • Python中init方法的作用及使用方法

    Python中的init方法是一個類的構造函數,在創建對象時被調用。在本篇文章中,我們將從多個方面詳細討論init方法的作用,使用方法以及注意點。 一、定義init方法 在Pyth…

    編程 2025-04-29
  • Python中將字元串轉化為浮點數

    本文將介紹在Python中將字元串轉化為浮點數的常用方法。在介紹方法之前,我們先來思考一下這個問題應該如何解決。 一、eval函數 在Python中,最簡單、最常用的將字元串轉化為…

    編程 2025-04-29
  • 使用Vue實現前端AES加密並輸出為十六進位的方法

    在前端開發中,數據傳輸的安全性問題十分重要,其中一種保護數據安全的方式是加密。本文將會介紹如何使用Vue框架實現前端AES加密並將加密結果輸出為十六進位。 一、AES加密介紹 AE…

    編程 2025-04-29
  • Python中讀入csv文件數據的方法用法介紹

    csv是一種常見的數據格式,通常用於存儲小型數據集。Python作為一種廣泛流行的編程語言,內置了許多操作csv文件的庫。本文將從多個方面詳細介紹Python讀入csv文件的方法。…

    編程 2025-04-29
  • 用不同的方法求素數

    素數是指只能被1和自身整除的正整數,如2、3、5、7、11、13等。素數在密碼學、計算機科學、數學、物理等領域都有著廣泛的應用。本文將介紹幾種常見的求素數的方法,包括暴力枚舉法、埃…

    編程 2025-04-29
  • Python 常用資料庫有哪些?

    在Python編程中,資料庫是不可或缺的一部分。隨著互聯網應用的不斷擴大,處理海量數據已成為一種趨勢。Python有許多成熟的資料庫管理系統,接下來我們將從多個方面介紹Python…

    編程 2025-04-29

發表回復

登錄後才能評論