首頁 > web前端 > js教程 > 主體

JavaScript字串String和Array操作的有趣方法_javascript技巧

WBOY
發布: 2016-05-16 17:46:13
原創
1016 人瀏覽過

字串和陣列在程式編寫過程中是十分常用的類型,因此程式語言都會將String和Array作為基本類型,並提供許多字串和陣列的方法來簡化對字串的操作。 JavaScript裡面也提供了String類型和Array類型,而且有許多基本的String方法和Array方法來方便地對字串進行合併、尋找、取代、截取等處理。

JavaScript作為一個腳本語言,又提供了一種動態解析運行的機制,而這特性,又讓使得在String操作的時候出現一些結合使用Array的有趣方法。這些方法可能有些偏門有點奇怪,但有時在效率、可讀性、多用性上表現得更好。

重複字串
常常我們想要多次印出字串(例如想要個分割線),我們就需要將一個字串重複多次, 可惜JavaScript並沒有提供類似repeat這樣的方法。當然我們可以用迴圈來拼接出來,但我們可以利用JavaScript中Array的join方法來實作repeat

複製程式碼 程式碼如下:

function repeat(str, n) {
var arr = new Array(n 1);
return arr.join(str);
}
/ /output:
//-------

利用n 1個Array元素產生的n個間隙,再以目標字串來拼接,我們就能得到字串重複的功能。
擴充String的prototype使方法應用於所有字串
JavaScript的物件繼承和方法尋找是基於原型鏈(prototype chain),所有使用著的字串都可以說是繼承於String的對象,我們可以為String物件的prototype新增方法或屬性,這樣該方法就可以應用到所有我們使用的物件上了。比如上邊的repeat方法,就可以改成:
複製代碼 代碼如下:

String .prototype.repeat = function(n) {
var arr = new Array(n 1);
return arr.join(this);
};
document.write('-'. repeat(21));
//output:
//---------------------

然後,直接透過字串呼叫repeat方法,就可以得到跟上邊一樣的結果。
這可以讓我們實作字串方法的擴充,簡潔對字串的操作,但是這會「污染」了JavaScript的String,當程式碼被轉到其他檔案但是那個檔案下並沒有得到這段擴充,就可能會造成找不到該方法;另外,呼叫prototype擴充方法比直接呼叫方法要稍微「慢」一些,因為JavaScript會先去在字串物件本身的方法中嘗試尋找,再找到String的prototype的方法;再者也許在將來我們擴充的方法(例如repeat)變成了標準方法了,再使用這程式碼就會涵蓋了標準方法,得到不一致的結果。

但是忽略這些考慮,擴充JavaScript標準類型的prototype還是會為程式設計帶來許多的遍歷。

用Array作StringBuilder
在許多高階語言中,加號( )在字串的運算中被賦予了更多的意義:作為字串拼接的運算符。不過在Java和C#中,我們也知道如何頻繁進行字串拼接的操作,使用加號( )就會產生效率問題,因此在這種情況下就會推薦使用StringBuilder。

JavaScript也支援使用加號( )來進行字串拼接,那麼也會有存在效率問題呢。可是JavaScript並沒有提供StringBuilder這樣的類別。

其實在Java,C#中使用StringBuilder時,我們多數也是用append方法,而很少會用insert。還好JavaScript的Array是不限大小自動增長的,所以我們就可以利用Array來做StringBuilder,最後再join空字串來拼接出目標字串。
複製程式碼 程式碼如下:

var sb = [for];


var sb = [];
forvar8 i = 0; i sb.push(i);
}
document.write(sb.join(''));
//output: //0123456789101112131415161718192021
到底是用Array做StringBuilder還是直接字串拼接,jsPerf上有過很多testcases比較兩者的效率,但是因為初始值、環境、字串長度等原因,所以結果不一。其實字串內容不是很大,或是可以使用多個加號( )組合在一起,那麼字串拼接還是可以的;若是在程式碼不同地方對同一字串變數進行追加,那麼可能使用Array配合join會更好。

用split取代字串的子字串找出並取代
在字串的操作中,很常出現的就是想要從字串中找一個子字串是否存在,然後截取出該字串,抑或是將該子字串替換成其它字串。

例如給一個檔名,希望根據點(.)分割取得基本名和後綴名。先來看看使用標準String方法實現的這些操作:
複製程式碼 程式碼如下:


程式碼如下:



程式碼如下:



程式碼如下:


function getBaseName(str) {
var pos = str.lastIndexOf('.');
if(pos return str.substring(0, pos);
}
function getExtension(str) {
var pos = str.lastIndexOf('.');
if(pos return str.substr(pos 1);
}
var fileName = 'hello_world.js';
document.write(getBaseName(fileName)); document.write('
'); document.write (getExtension(fileName)); //output: //hello_world //js
(除了substr和substring外,JavaScript還有slice都可以用來取得字串的子字串,但也正是因為選擇太多,常常讓我在出現選擇恐慌,還有位置是該不該1,對負數是如何處理也讓我揪心。之前看到可以透過join把陣列變成字串,也可以利用String的split的方法把字串變成陣列。對於上邊取檔名及副檔名的問題,我們就可以根據「.」把檔名分裂成數組各個部分,那麼假如得到的數字大於1(後綴名存在),則所得數字的最後一個元素就是文件的副檔名了:




複製程式碼


程式碼如下:


function getsName(str) { var segs = str.split('.');
if(segs.length > 1) segs.pop();
return segs.join('.');
}
function getExtension(str) {
var segs = str.split('.');
if(segs.length return segs.pop(); } 考慮到檔案名稱中可能包含多個“.”,所以我們還是需要用“.”把除了最後一部分外的各個部分join回來。 看到可以對字串先split再join,就可以想到,我們可以想到對於這兩個方法的參數可以傳入不同的字串,這樣就起到了代替String的replace方法進行子字串替換的功能了,而且還是全域替換。
例如希望把所有的底線(_)換成橫槓(-):




複製程式碼

程式碼如下:

var str = 'hello_from_ider_to_world'.split('_').join('-'); document.write(str);
//Output:
document.write(str);
//Output:
很多人知道String的replace方法是用來替換字串子字串的,也可能知道它可以接受正規表示式作為第一參數,而且如何要取代所有出現的地方,就必須要用RegExp並包含global標記。
比如之前的替換操作,用replace就應該是:



複製代碼
代碼如下: var str = 'hello_from_ider_to_world'.replace(/_/g, '-'); document.write(str);

再例如很常用的trim方法,雖然🎜>

再例如很常用的trim方法,雖然JavaScript並沒有提供我們也可以自己很快的實作:
複製程式碼 程式碼如下: 程式碼如下: String.prototype.trim = function() { return this.replace(/^s |s $/g, ''); };
我們知道正規表示式一個很強大的功能就是向後引用(Back Reference),實際上JavaScript的replace不僅在第一個參數內做向後引用,而且在替換字串上,也可以進行向後來引用,只是很多地方可能用反斜線()加數字作為標示而JavaScript則是用美刀($)加數字作為標示。
複製程式碼 程式碼如下:

var friends = 'friends of I Angder, friends of I Angder' ;
var result = friends.replace(/(friends?) of (w )/g, "$2's $1");
document.write(result);
//output:
//Ider's friends, Angie's friend

透過在替換字串裡面進行向後引用,我們很快就把「朋友of 誰誰誰」變成了「誰誰誰的朋友」。如果還要更複雜點怎麼辦呢?沒有關係,replace還能接受Function作為參數作為回呼函數,其中函數的第一個參數是整個匹配中的字串,之後每一個代表個個向後引用匹配的,函數的返回值則是作為替換的字串。所以很多使用,函數參數都會用$0, $1, $2來表示。來看範例:
複製程式碼 程式碼如下:

var friends ="friends of mine , friend of her and friends of his";
var result = friends.replace(/(friends?) of (w )/g,
function($0, $1, $2) {
if($2 == 'mine') $2 = 'my';
return $2 ' ' $1;
});
document.write(result);
//output:
//my friends, her friend and his friends

透過回呼函數就可以實現很多很負責的字串匹配了。至於效率,就先不考慮了。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板