DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 深入探討JavaScript String對象
深入探討JavaScript String對象
編輯:JavaScript基礎知識     

String 字符串對象

1. 介紹

  String 對象,對字符串進行操作,如:截取一段子串、查找字符串/字符、轉換大小寫等等。

2. 定義方式

2.1 new String(Value) 構造函數:返回一個內容為Value的String對象
參數:

①value {String} :字符串

返回值:

{String對象} 返回一個內容為Value的String對象

示例:

復制代碼 代碼如下:
var demoStr = new String('abc');
console.log(typeof demoStr); // => object
console.log(demoStr); // => abc

2.2 直接賦值(推薦)
示例:

復制代碼 代碼如下:
var demoStr = 'abc';
console.log(typeof demoStr); // string
console.log(demoStr); // => abc

3. 實例屬性

3.1 length :返回字符串中的字符數

復制代碼 代碼如下:
var s = 'abc';
console.log(s.length); // => 3
console.log('新年快樂'.length); // => 4 :一個中文字符也計算為1個數量
console.log(''.length); // => 0 :空字符串返回0

4. 實例方法

注意:字符串的實例方法不會改變字符串的本身,只返回操作後的結果。

4.1 charAt(index) :返回一個字符串中指定位置的字符,編號從0開始,若傳入個不存在的數值,就返回空字符串
參數:

①index {int} :位置索引,從0開始計算

返回值:

{string} 返回一個字符串中指定位置的字符;若傳入個不存在的位置數值,返回一個空字符串

示例:

復制代碼 代碼如下:
var s = 'abc';
console.log(s.charAt(1)); // => b :返回位置為1的字符
console.log(s); // => 不影響原來的數組
console.log(s.charAt(5)); // => '' :獲取一個不存在位置的字符,返回一個長度為0的空字符串

4.2 charCodeAt(index) :返回一個字符串中指定位置字符的Unicode編碼
參數:

①index {int} :位置索引,從0開始計算

返回值:

{number}  返回一個字符串中指定位置字符的Unicode編碼;若傳入個不存在的位置數值,返回NaN

示例:

復制代碼 代碼如下:
var s = 'abc';
console.log(s.charCodeAt(0)); // => 98 :字符b的Unicode編碼
console.log(s.charCodeAt(5)); // => NaN :獲取一個不存在位置的字符,返回NaN

4.3 concat(value1,value2 ... valueN) :連接一個或多個字符串,並返回連接後的字符串
參數:

①value1,value2 ... valueN {string} :一個或多個字符串

返回值:

{string}  返回連接後的字符串

示例:

復制代碼 代碼如下:
var s = 'abc';
console.log(s.concat('d')); // => abcd
console.log(s); // => abc :不影響原先的字符串
console.log(s.concat('d', 'e')); // => abcde

4.4 indexOf(value , |startPosition ) :在實例中從前往後查找一個字符串或字符,並返回找到的位置(從0開始計數)。若未找到,返回-1
參數:

①value  {string} :查找的字符串

②startPosition {int} 可選 :開始查找的起始位置,默認從位置0開始查找

返回值:

{int}  返回找到的位置(從0開始計數)。若未找到,返回-1

示例:

復制代碼 代碼如下:
var s = 'abc';
console.log(s.indexOf('b')); // => 1
console.log(s.indexOf('d')); // => -1 :未找到
console.log(s.indexOf('b', 2)); // => -1 :從位置2(第3個字符處)開始查找

4.5 lastIndexOf(value , |startPosition ) :在實例中從後往前開始查找一個字符串或字符,並返回找到的位置(從0開始計數)。若未找到,返回-1
參數:

①value  {string} :查找的字符串

②startPosition {int} 可選 :開始查找的起始位置,默認從最後開始查找

返回值:

{int}  返回找到的位置(從0開始計數)。若未找到,返回-1

示例:

復制代碼 代碼如下:
var s = 'abcabc';
console.log(s.lastIndexOf('a')); // => 3 :從後往前查找
console.log(s.lastIndexOf('d')); // => -1 :未找到返回-1
console.log(s.lastIndexOf('a', 2)); // => 0 :從位置2(第3個字符處)開始往前查找

4.6 localeCompare(value) :實例與參數進行比較,返回比較結果
參數:

①value  {string} :需比較的字符串

返回值:

  0 :實例比參數大

  1 :實例與參數相等

  -1 :實例比參數小

示例:

復制代碼 代碼如下:
var s='abc';
console.log(s.localeCompare('ab')); // => 1 :實例比參數大
console.log(s.localeCompare('abc')); // => 0 :實例與參數相等
console.log(s.localeCompare('abd')); // => -1 :實例比參數小
 

4.7 match(regexp) :使用正則表達式進行匹配查找
參數:

①regexp {regexp} :正則表達式,eg:/\d+/

返回值:

根據正則表達式是否帶屬性'g',返回不同的結果;若沒匹配,就返回 {null}:

①正則表達式不帶屬性'g',執行一次匹配,返回{單個匹配}結果對象,對象包含以下屬性:

  數組序號:表示匹配結果,0為匹配文本,1為從做到右第1個圓括號匹配結果,2為第二個圓括號,依此類推

  index屬性:表示匹配文本在匹配源的開始位置

  input屬性:表示匹配源

②正則表達式帶屬性'g',執行全局匹配,找到字符串所有匹配對象,返回一個{字符串數組}:數組元素包含string中的每一個匹配對象,不包含正則表達式括號內的字串,也不提供index和input屬性。

示例:

復制代碼 代碼如下:
// 1.單個匹配
var s = 'a1b2c3d4';
var mc = s.match(/\d+/); // => 獲取第一個正則匹配的結果
if (mc != null) {
    console.log(mc.index); // => 1 :匹配結果在匹配源的起始位置
    console.log(mc.input) // => a1b2c3d4 :匹配源
    console.log(mc[0]); // => 1 :獲取匹配到的結果
}
// 2.全局匹配
var mcArray = s.match(/\d+/g); // => 獲取全部正則匹配的數字
if (mcArray != null) {
    for (var i = 0,len=mcArray.length; i < len; i++) {
        var mc=mcArray[i];
        console.log(mc); // => 1,2,3,4 :獲取匹配到的結果
    }
}
// 3.帶括號的匹配
s = 'a1b2c3d4';
mc = s.match(/[a-z]([1-9])/); // => 獲取第一個正則匹配的結果
if (mc != null) {
    console.log(mc.index); // => 0 :匹配結果在匹配源的起始位置
    console.log(mc.input) // => a1b2c3d4 :匹配源
    console.log(mc[0]); // => a1 :序號0表示匹配到的結果
    console.log(mc[1]); // => 1 :序號1表示第一個括號內的子匹配結果
}

4.8  replace(regexp, replaceStr) :替換正則表達式匹配的子串,並返回替換後的字符串
參數:

①regexp {regexp} :正則表達式。eg:/\d+/

②replaceStr {string | function} :

1)若是字符串,表示替換的字符串,匹配到字串都替換成此字符串;

字符串中的$字符有特殊的含義:

$1,$2 ... $99 :表示①參從左到右圓括號的匹配子項

$& :表示整個①參匹配的子項

$$ :美元符號

2)若是函數,表示每個匹配結果都調用此函數,函數的唯一參數為匹配結果,並返回一個替換結果。

返回值:

{string} 返回一個替換後的字符串

示例:

復制代碼 代碼如下:
var oldStr = 'a1b2c3d4';
// 1.正則匹配到【所有】數字,替換成:','逗號
var newStr = oldStr.replace(/\d+/g, ',');
console.log(newStr); // => a,b,c,d,
// 2.正則匹配到【所有】數字,替換成:匹配結果 + ','逗號
newStr = oldStr.replace(/\d+/g, '$&,');
console.log(newStr); // => a1,b2,c3,d4,
// 3.正則匹配到【所有】數字,每個匹配結果都調用函數,並返回替換後的結果
newStr = oldStr.replace(/\d+/g, function (word) {
    if (word % 2 == 0) {
        return '偶';
    }
    return '奇';
});
console.log(newStr); // => a奇b偶c奇d偶

4.9 search(regexp) :返回查找正則表達式第一個匹配的位置
參數:

①regexp {regexp} :正則表達式。eg:/\d+/

返回值:

{int} 返回第一個匹配的結果的位置;若沒找到匹配結果返回-1

示例:

復制代碼 代碼如下:
console.log( 'abcd'.search(/\d+/) ); // => -1 :沒有找到數字
console.log( 'abcd1234'.search(/\d+/) ); // => 4 :位置序號為4,返回第一個數字的位置

4.10  slice(start, |end):返回從字符串start位置到end前一個位置的子串
參數:

①start {int} :子串提取的開始位置索引(包括此位置的字符)。

      若數字為負,表示從字符串尾部開始計算。如:-1表示倒數一個字符串,-2表示倒數第二個字符。

②end {int} 可選:子串提取的結束位置索引(不包括此位置的字符)。

      若數字為負,表示從字符串尾部開始計算。如:-1表示倒數一個字符串,-2表示倒數第二個字符。

      若省略此參數,返回從start位置到結束的所有字符。

注意:

子串的提取順序是從左到有,若start索引位置大於end索引位置,將返回一個空字符串。

返回值:

{string} 返回從字符串start位置到end前一個位置的子串。

示例:

復制代碼 代碼如下:
var s = 'abcdefg';
console.log( s.slice(1) ); // bcdefg :省略end參數,結束位置為末尾
console.log( s.slice(1, 3) ); // bc :返回從位置序號1到位置序號2(end前一個位置)的子串
console.log( s.slice(-3) ); // efg :返回從倒數第三個開始到末尾的所有字符
console.log( s.slice(-3, -1) ); // ef :返回從倒數第三個開始到第二個(end前一個位置)的所有字符

4.11 split(delimiter, |arrayLength) :將字符串按照某種分隔符切分成一個由字符串組成的數組並返回
參數:

①delimiter {regexp | string} :指定的分隔符,可以為正則表達式或字符串。

②arrayLength {int} 可選 :分割數組的長度。若省略,返回所有分割的子串。

注意:

若分隔符在字符串的第一個或最後一個,將添加一個空字符串到返回的數組。

返回值:

{ string[] } 返回一個由字符串組成的數組。

示例:

復制代碼 代碼如下:
console.log( 'a,b,c,d,e'.split(',') ); // => ["a", "b", "c", "d", "e"]
console.log( ',a,b,c,d,e,'.split(',') ); // => ["", "a", "b", "c", "d", "e", ""] :分隔符在最前或最後面,會添加一個空字符串
console.log( 'a,b,c,d,e'.split(',',3) ); // => ["a", "b", "c"] :返回前3個分割的子串
console.log( 'a1b2c3d4e'.split(/\d/) ); // => ["a", "b", "c", "d", "e"] :將數字來做為分隔符

4.12 substr(start, |wordLength):返回從字符串start位置開始計算到wordLength個長度的子串
參數:

①start {int} :子串提取的開始位置索引(包括此位置的字符)。

      若數字為負,表示從字符串尾部開始計算。如:-1表示倒數一個字符串,-2表示倒數第二個字符。

②wordLength {int} 可選 :提取字符的長度。若省略此參數,返回從start位置到結束的所有字符。

返回值:

{string} 返回提取的字符串

示例:

復制代碼 代碼如下:
ar s = 'abcdefg';
onsole.log( s.substr(0) ); // =>  abcdefg :省略第二個參數,返回從位置序號0開始,一直到最後的字符
onsole.log( s.substr(0, 3) ); // => abc :返回從位置序號0開始,計數3個字符
onsole.log( s.substr(2, 4) ); // => cdef :返回從位置序號2開始,計數4個字符
onsole.log( s.substr(-2, 3) ); // fg :返回從倒數第二個字符串開始,計數3個(超過字符長度,就只返回可統計的字符)

4.13 substring(start, |end) :返回從字符串start位置到end前一個位置的子串
參數:

①start {int} :子串提取的開始位置索引(包括此位置的字符)。數字不能為負數,若為負數按0來處理

②end {int} 可選:子串提取的結束位置索引(不包括此位置的字符)。數字不能為負數,若為負數按0來處理

返回值:

{string} 返回從字符串start位置到end前一個位置的子串。

示例:

復制代碼 代碼如下:
var s = 'abcdefg';
console.log( s.substring(0) ); // =>  abcdefg :省略end參數,返回從位置序號0開始,一直到最後的字符
console.log( s.substring(0, 3) ); // => abc :返回從位置序號0開始到位置序號2(②參的前一個)的字符
console.log( s.substring(2, 4) ); // => cd :返回從位置序號2開始到位置序號3(②參的前一個)的字符
console.log( s.substring(-3, 3) ); // abc :參數若為負,就按數字0來處理,所以此參數實際返回位置序號0到位置序號3的字符

4.14 toUpperCase() :將字符串轉換為大寫並返回
4.15 toUpperCase() :將字符串轉換為小寫並返回
4.16 trim() :移除字符串開頭和結尾處的空白字符並返回

以上就是本文的全部內容了,希望通過本文,大家對javascript中的String對象能有新的認識。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved