【JavaScript 教程】標準庫—String 對象

2021-02-21 web前端開發

作者 | 阮一峰1、概述

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

var s1 = 'abc';
var s2 = new String('abc');

typeof s1
typeof s2

s2.valueOf()

上面代碼中，變量s1是字符串，s2是對象。由於s2是字符串對象，s2.valueOf方法返回的就是它所對應的原始字符串。

字符串對象是一個類似數組的對象（很像數組，但不是數組）。

new String('abc')


(new String('abc'))[1]

上面代碼中，字符串abc對應的字符串對象，有數值鍵（0、1、2）和length屬性，所以可以像數組那樣取值。

除了用作構造函數，String對象還可以當作工具方法使用，將任意類型的值轉為字符串。

String(true)
String(5)

上面代碼將布爾值true和數值5，分別轉換為字符串。

2、靜態方法


2.1、String.fromCharCode()

String對象提供的靜態方法（即定義在對象本身，而不是定義在對象實例的方法），主要是String.fromCharCode()。該方法的參數是一個或多個數值，代表 Unicode 碼點，返回值是這些碼點組成的字符串。

String.fromCharCode()
String.fromCharCode(97)
String.fromCharCode(104, 101, 108, 108, 111)

上面代碼中，String.fromCharCode方法的參數為空，就返回空字符串；否則，返回參數對應的 Unicode 字符串。

注意，該方法不支持 Unicode 碼點大於0xFFFF的字符，即傳入的參數不能大於0xFFFF（即十進位的 65535）。

String.fromCharCode(0x20BB7)

String.fromCharCode(0x20BB7) === String.fromCharCode(0x0BB7)

上面代碼中，String.fromCharCode參數0x20BB7大於0xFFFF，導致返回結果出錯。0x20BB7對應的字符是漢字𠮷，但是返回結果卻是另一個字符（碼點0x0BB7）。這是因為String.fromCharCode發現參數值大於0xFFFF，就會忽略多出的位（即忽略0x20BB7裡面的2）。

這種現象的根本原因在於，碼點大於0xFFFF的字符佔用四個字節，而 JavaScript 默認支持兩個字節的字符。這種情況下，必須把0x20BB7拆成兩個字符表示。

String.fromCharCode(0xD842, 0xDFB7)

上面代碼中，0x20BB7拆成兩個字符0xD842和0xDFB7（即兩個兩字節字符，合成一個四字節字符），就能得到正確的結果。碼點大於0xFFFF的字符的四字節表示法，由 UTF-16 編碼方法決定。

3、實例屬性3.1、String.prototype.length

字符串實例的length屬性返回字符串的長度。

'abc'.length


4、實例方法4.1、String.prototype.charAt()

charAt方法返回指定位置的字符，參數是從0開始編號的位置。

var s = new String('abc');

s.charAt(1)
s.charAt(s.length - 1)

這個方法完全可以用數組下標替代。

'abc'.charAt(1)
'abc'[1]

如果參數為負數，或大於等於字符串的長度，charAt返回空字符串。

'abc'.charAt(-1)
'abc'.charAt(3)

4.2、String.prototype.charCodeAt()

charCodeAt方法返回字符串指定位置的 Unicode 碼點（十進位表示），相當於String.fromCharCode()的逆操作。

'abc'.charCodeAt(1)

上面代碼中，abc的1號位置的字符是b，它的 Unicode 碼點是98。

如果沒有任何參數，charCodeAt返回首字符的 Unicode 碼點。

'abc'.charCodeAt()

 如果參數為負數，或大於等於字符串的長度，charCodeAt返回NaN。        

'abc'.charCodeAt(-1)
'abc'.charCodeAt(4)

注意，charCodeAt方法返回的 Unicode 碼點不會大於65536（0xFFFF），也就是說，只返回兩個字節的字符的碼點。如果遇到碼點大於 65536 的字符（四個字節的字符），必需連續使用兩次charCodeAt，不僅讀入charCodeAt(i)，還要讀入charCodeAt(i+1)，將兩個值放在一起，才能得到準確的字符。

4.3、String.prototype.concat()

concat方法用於連接兩個字符串，返回一個新字符串，不改變原字符串。

var s1 = 'abc';
var s2 = 'def';

s1.concat(s2)
s1

該方法可以接受多個參數。

'a'.concat('b', 'c')

如果參數不是字符串，concat方法會將其先轉為字符串，然後再連接。

var one = 1;
var two = 2;
var three = '3';

''.concat(one, two, three)
one + two + three

上面代碼中，concat方法將參數先轉成字符串再連接，所以返回的是一個三個字符的字符串。作為對比，加號運算符在兩個運算數都是數值時，不會轉換類型，所以返回的是一個兩個字符的字符串。

4.4、String.prototype.slice()

slice方法用於從原字符串取出子字符串並返回，不改變原字符串。它的第一個參數是子字符串的開始位置，第二個參數是子字符串的結束位置（不含該位置）。

'JavaScript'.slice(0, 4)

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

'JavaScript'.slice(4)

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

'JavaScript'.slice(-6)
'JavaScript'.slice(0, -6)
'JavaScript'.slice(-2, -1)

如果第一個參數大於第二個參數，slice方法返回一個空字符串。

'JavaScript'.slice(2, 1)

4.5、String.prototype.substring()

substring方法用於從原字符串取出子字符串並返回，不改變原字符串，跟slice方法很相像。它的第一個參數表示子字符串的開始位置，第二個位置表示結束位置（返回結果不含該位置）。

'JavaScript'.substring(0, 4)

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

'JavaScript'.substring(4)

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

'JavaScript'.substring(10, 4)

'JavaScript'.substring(4, 10)

上面代碼中，調換substring方法的兩個參數，都得到同樣的結果。

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

'JavaScript'.substring(-3)
'JavaScript'.substring(4, -3)

上面代碼中，第二個例子的參數-3會自動變成0，等同於'JavaScript'.substring(4, 0)。由於第二個參數小於第一個參數，會自動互換位置，所以返回Java。

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

4.6、String.prototype.substr()

substr方法用於從原字符串取出子字符串並返回，不改變原字符串，跟slice和substring方法的作用相同。

substr方法的第一個參數是子字符串的開始位置（從0開始計算），第二個參數是子字符串的長度。

'JavaScript'.substr(4, 6)

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

'JavaScript'.substr(4)

如果第一個參數是負數，表示倒數計算的字符位置。如果第二個參數是負數，將被自動轉為0，因此會返回空字符串。

'JavaScript'.substr(-6)
'JavaScript'.substr(4, -1)

上面代碼中，第二個例子的參數-1自動轉為0，表示子字符串長度為0，所以返回空字符串。

4.7、String.prototype.indexOf()，String.prototype.lastIndexOf()

indexOf方法用於確定一個字符串在另一個字符串中第一次出現的位置，返回結果是匹配開始的位置。如果返回-1，就表示不匹配。

'hello world'.indexOf('o')
'JavaScript'.indexOf('script')

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

'hello world'.indexOf('o', 6)

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

'hello world'.lastIndexOf('o')

另外，lastIndexOf的第二個參數表示從該位置起向前匹配。

'hello world'.lastIndexOf('o', 6)

4.8、String.prototype.trim()

trim方法用於去除字符串兩端的空格，返回一個新字符串，不改變原字符串。

' hello world '.trim()

該方法去除的不僅是空格，還包括制表符（\t、\v）、換行符（\n）和回車符（\r）。

'\r\nabc \t'.trim()

4.9、String.prototype.toLowerCase()，String.prototype.toUpperCase()

toLowerCase方法用於將一個字符串全部轉為小寫，toUpperCase則是全部轉為大寫。它們都返回一個新字符串，不改變原字符串。

'Hello World'.toLowerCase()


'Hello World'.toUpperCase()

4.10、String.prototype.match()

match方法用於確定原字符串是否匹配某個子字符串，返回一個數組，成員為匹配的第一個字符串。如果沒有找到匹配，則返回null。

'cat, bat, sat, fat'.match('at')
'cat, bat, sat, fat'.match('xt')

返回的數組還有index屬性和input屬性，分別表示匹配字符串開始的位置和原始字符串。

var matches = 'cat, bat, sat, fat'.match('at');
matches.index
matches.input

match方法還可以使用正則表達式作為參數，詳見《正則表達式》一章。

4.11、String.prototype.search()，String.prototype.replace()

search方法的用法基本等同於match，但是返回值為匹配的第一個位置。如果沒有找到匹配，則返回-1。

'cat, bat, sat, fat'.search('at')

search方法還可以使用正則表達式作為參數，詳見《正則表達式》一節。

replace方法用於替換匹配的子字符串，一般情況下只替換第一個匹配（除非使用帶有g修飾符的正則表達式）。

'aaa'.replace('a', 'b')

replace方法還可以使用正則表達式作為參數，詳見《正則表達式》一節。

4.12、String.prototype.split()

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

'a|b|c'.split('|')

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

'a|b|c'.split('')

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

'a|b|c'.split()

如果滿足分割規則的兩個部分緊鄰著（即兩個分割符中間沒有其他字符），則返回數組之中會有一個空字符串。

'a||c'.split('|')

如果滿足分割規則的部分處於字符串的開頭或結尾（即它的前面或後面沒有其他字符），則返回數組的第一個或最後一個成員是一個空字符串。

'|b|c'.split('|')
'a|b|'.split('|')

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

'a|b|c'.split('|', 0)
'a|b|c'.split('|', 1)
'a|b|c'.split('|', 2)
'a|b|c'.split('|', 3)
'a|b|c'.split('|', 4)

上面代碼中，split方法的第二個參數，決定了返回數組的成員數。

split方法還可以使用正則表達式作為參數，詳見《正則表達式》一節。

4.13、String.prototype.localeCompare()

localeCompare方法用於比較兩個字符串。它返回一個整數，如果小於0，表示第一個字符串小於第二個字符串；如果等於0，表示兩者相等；如果大於0，表示第一個字符串大於第二個字符串。

'apple'.localeCompare('banana')
'apple'.localeCompare('apple')

該方法的最大特點，就是會考慮自然語言的順序。舉例來說，正常情況下，大寫的英文字母小於小寫字母。

'B' > 'a'

上面代碼中，字母B小於字母a。因為 JavaScript 採用的是 Unicode 碼點比較，B的碼點是66，而a的碼點是97。

但是，localeCompare方法會考慮自然語言的排序情況，將B排在a的前面。

'B'.localeCompare('a')

上面代碼中，localeCompare方法返回整數1，表示B較大。

localeCompare還可以有第二個參數，指定所使用的語言（默認是英語），然後根據該語言的規則進行比較。

'ä'.localeCompare('z', 'de')
'ä'.localeCompare('z', 'sv')

上面代碼中，de表示德語，sv表示瑞典語。德語中，ä小於z，所以返回-1；瑞典語中，ä大於z，所以返回1。

本章節完

推薦閱讀系列章節

【JavaScript 教程】入門篇-導論

【JavaScript 教程】入門篇-JavaScript 語言的歷史

【JavaScript 教程】入門篇-JavaScript 的基本語法

【JavaScript 教程】數據類型-概述

【JavaScript 教程】數據類型-null, undefined 和布爾值

【JavaScript 教程】數據類型-數值

【JavaScript 教程】數據類型-字符串

【JavaScript 教程】數據類型-對象

【JavaScript 教程】數據類型-函數

【JavaScript 教程】數據類型-數組

【JavaScript 教程】運算符—算術運算符

【JavaScript 教程】運算符—比較運算符

【JavaScript 教程】運算符—布爾運算符

【JavaScript 教程】運算符—二進位位運算符

【JavaScript 教程】運算符—其他運算符，運算順序

【JavaScript 教程】語法專題—數據類型的轉換

【JavaScript 教程】語法專題—錯誤處理機制

【JavaScript 教程】語法專題—編程風格

【JavaScript 教程】語法專題—console 對象與控制臺

【JavaScript 教程】標準庫—Object 對象

【JavaScript 教程】標準庫—屬性描述對象

【JavaScript 教程】標準庫—Array 對象

【JavaScript 教程】標準庫—包裝對象

【JavaScript 教程】標準庫—Boolean 對象

【JavaScript 教程】標準庫—Number 對象

相關焦點

  • 【JavaScript 教程】標準庫—Math 對象
    該對象不是構造函數，不能生成實例，所有的屬性和方法都必須在Math對象上調用。1、靜態屬性Math對象的靜態屬性，提供以下一些數學常數。2、靜態方法Math對象提供以下一些靜態方法。【JavaScript 教程】數據類型-字符串【JavaScript 教程】數據類型-對象【JavaScript 教程】數據類型-函數【JavaScript 教程】數據類型-數組【JavaScript 教程】運算符—算術運算符【JavaScript 教程】運算符—比較運算符【JavaScript 教程】運算符
  • 【JavaScript 教程】標準庫—Date 對象
    get*方法，用來獲取實例對象某個方面的值。教程】數據類型-null, undefined 和布爾值【JavaScript 教程】數據類型-數值【JavaScript 教程】數據類型-字符串【JavaScript 教程】數據類型-對象【JavaScript 教程】數據類型-函數【JavaScript 教程】數據類型-數組【JavaScript 教程】運算符—
  • 【JavaScript 教程】標準庫—Object 對象
    JavaScript 的所有其他對象都繼承自Object對象，即那些對象都是Object的實例。Object對象的原生方法分成兩類：Object本身的方法與Object的實例方法。（1）Object對象本身的方法所謂「本身的方法」就是直接定義在Object對象的方法。
  • JavaScript String replaceAll()方法
    英文 | https://www.javascripttutorial.net
  • C++之旅-string
    前言標準庫類型string表示可變長字符序列，使用之前需要包含string頭文件，它定義在命名空間std中。
  • 12 個 GitHub 上超火的 JavaScript 奇技淫巧項目,找到寫 JavaScript 的靈感!
    new Number() 是一個對象而不是 number，因此返回 false。https://github.com/lydiahallie/javascript-questions4. 本教程適合初學者當作 JavaScript 語言入門教程，學完後就可以承擔實際的網頁開發工作，也適合當作日常使用的參考手冊。
  • JavaScript入門教程
    起源javascript前身叫做livescript，sun公司推出java，netspace公司引進java的概念，重新設計livescript，並更名javascript。發明者，布蘭登.艾克，表單驗證原先要經過伺服器，伺服器壓力大，等待時間長，js僅在客戶端就可完成。是什麼是一種腳本語言，是一種輕量級的程式語言。
  • 【JavaScript 教程】第五章 字符串11— includes():檢查字符串是否包含子字符串
    英文 | https://www.javascripttutorial.net
  • javascript之常用數據類型及判斷方法
    ，今天，我們來具體重新了解下javascript中的常見數據類型以及他們的判斷方法。，1.基本數據類型：包括number：數字類型；string：字符串類型；boolean布爾類型。2.string數據類型：string數據類型即為字符串數據類型，在使用字符串類型中，常需要用單引號或雙引號進行包裹。同時可以通過String()強制將任何數據類型轉化為字符串類型。
  • 8個最常用的Javascript對象方法
    英文 | https://medium.com/geekculture/8-javascript-object-methods-every-developer-should-know
  • 【JavaScript 教程】第二章基礎知識04—JavaScript Number
    英文 | https://www.javascripttutorial.net
  • JavaScript - Math對象
    Math對象在我們js中其實是有很多數學計算的需求的，不過不必擔心系統給我們提供了大量的數學運算的方法供我們使用而這些方法全都存在於我們的Math對象中Math常用的屬性：Math.PI 相當於π 3.14159Math對象常用的函數
  • JavaScript 原型對象(ProtoType)介紹 | JavaScript 教程
    prototype（原型對象）中繼承屬性和方法：Date 對象從 Date.prototype 繼承。Array 對象從 Array.prototype 繼承。Person 對象從 Person.prototype 繼承。所有 JavaScript 中的對象都是位於原型鏈頂端的 Object 的實例。JavaScript 對象有一個指向一個原型對象的鏈。
  • 【Python】string 標準庫使用盲區整理
    class FormatValue(object): def __init__(self, string): self.string = stringformat_value = FormatValue("核心編程 面試解析")print('全棧筆記本 Python {0.string}'.format(format_value
  • golang標準庫template
    import ( "os" "text/template")func main() {DOCTYPE html><html lang="en"><head>    <title>Test golang template</title>
  • 【JavaScript 教程】瀏覽器—表單,FormData 對象
    表單提供多種控制項，讓開發者使用，具體的控制項種類和用法請參考 HTML 語言的教程。本章主要介紹 JavaScript 與表單的交互。FormData.keys()：返回一個遍歷器對象，用於for...of循環遍歷所有的鍵名。FormData.values()：返回一個遍歷器對象，用於for...of循環遍歷所有的鍵值。FormData.entries()：返回一個遍歷器對象，用於for...of循環遍歷所有的鍵值對。
  • 從 JavaScript 到 Go 語言的排序算法
    對於 Go 中的排序，標準庫提供了 sort 包，有意思的是，它使用了 Go 接口來定義對數據進行排序的規則。如果您使用過 JavaScript 的 Array.prototype.sort 方法，（那麼，您對此）會很熟悉！
  • 【雙語閱讀】關於JavaScript對象:你應該知道的15個基本原則
    原文地址：https://medium.com/dailyjs/15-fundamentals-you-should-know-on-javascript-objects-90f57cc9d78dKeys are strings, objects inherit from objects, class is sugar syntax, objects are
  • C++ string 類詳解
    string 類定義隱藏了字符串的數組性質，讓我們可以像處理普通變量那樣處理字符串。string 對象和字符數組之間的主要區別是：可以將 string 對象聲明為簡單變量，而不是數組。string &str) ：將一個 string 對象初始化為 string 對象 str（複製構造函數）string str1("hello!")