原生JS:String对象详解

String对象

正文参考MDN做的事无巨细整理,方便我们参考[MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript)

JavaScript中的 String 类型用于表示文本型的数据.
它是由无符号整数值(16bit)作为元素而构成的集合.
字符串中的每个元素在字符串中据为己有一个地点. 第一个元素的index值是0,
下一个因素的index值是1, 以此类推.
字符串的尺寸就是字符串中所含的元素个数.

String 对象是对原始string类型的卷入,你可以在String字面值上拔取String对象的其余措施—JavaScript自动把String字面值转换为一个临时的String对象,
然后调用其对应措施,最后放弃此临时对象.在String字面值上也得以使用String.length属性

访问字符串的单个字符方法:

  • 拿到字符串的某一单个字符有二种办法。
    第一种是利用 charAt 方法:
    return 'cat'.charAt(1); // returns "a"
  • 另一种方法 (在ECMAScript
    5中负有介绍)
    是把字符串当作一个类数组对象,其中的各类字符对应一个数值索引:
    return 'cat'[1]; // returns "a"

行使括号访问字符串不可以对其开展删除或添加,因为对应属性并不是可读或可写的。

你可以由此String字面值或者String对象二种方法开创一个字符串.

  • 屡见不鲜,我们都选择字符串的字面量写法
  • 可以利用 String 函数来将此外值 生成或更换
    成字符串:
    String(thing) 
    new String(thing)

字符串相比:能够用‘>’
或'<‘来对多少个字符、字符串举行相比。

除开一般的可打印字符以外,一些非正规的字符能够通过其转义形式放入字符串中:

Code

Output

\0

the NUL character

\’

single quote

\"

double quote

\\

backslash

\n

new line

\r

carriage return

\v

vertical tab

\t

tab

\b

backspace

\f

form feed

\uXXXX

unicode codepoint

\u{X} … \u{XXXXXX}

unicode codepoint  escapes (ES6)

\xXX

the Latin-1 character

  • 16进制转义系列在\x之后的数值将被认为是一个16进制数:’\xA9′ // “©”
  • Unicode转义连串在\u之后需要至少4个字符:’\u00A9′ // “©”
  • Unicode code point
    escapes:
    这是ECMAScript 6中的新特性. 有了Unicode
    code point escapes, 任何字符都得以用16进制数转义,
    这使得通过Unicode转义表示大于0x10FFFF的字符成为可能. 
  • 行使简单的Unicode转义时平常需要各自写字符相应的五个部分(译注:大于0x10FFFF的字符需要拆分为对应的五个小于0x10FFFF的部分)来达到相同的效果.请参阅 String.fromCodePoint() 或 String.prototype.codePointAt().
    '\u{2F804}'
    // the same with simple Unicode escapes 
    '\uD87E\uDC04'

String对象的艺术(各类艺术详解见本文底部)

方法

描述

charAtcharCodeAtcodePointAt

返回字符串指定位置的字符或者字符编码。

indexOflastIndexOf

分别返回字符串中指定子串的位置或最后位置。

startsWithendsWithincludes

返回字符串是否以指定字符串开始、结束或包含指定字符串。

concat

连接两个字符串并返回新的字符串。

fromCharCodefromCodePoint

从指定的Unicode值序列构造一个字符串。这是一个String类方法,不是实例方法。

split

通过将字符串分离成一个个子串来把一个String对象分裂到一个字符串数组中。

slice

从一个字符串提取片段并作为新字符串返回。

substringsubstr

分别通过指定起始和结束位置,起始位置和长度来返回字符串的指定子集。

matchreplacesearch

通过正则表达式来工作.

toLowerCasetoUpperCase

分别返回字符串的小写表示和大写表示。

normalize

Returns the Unicode Normalization Form of the calling string value.

repeat

将字符串内容重复指定次数后返回。

trim

去掉字符串开头和结尾的空白字符。

模板字符串:ES6新特点

模板字符串允许嵌入表明式,并且协理多行字符串和字符串插补特性。

语法

    `string text`  
    `string text line 1  
     string text line 2`   
    `string text ${expression} string text`  
    tag `string text ${expression} string text`

模板字符串使用反引号 (` `)
来顶替普通字符串中的用双引号和单引号。模板字符串可以涵盖特定语法(${expression})的占位符。占位符中的表明式和四周的文本会一起传递给一个默认函数,该函数负责将享有的片段连接起来,假使一个模板字符串由表明式开头,则该字符串被誉为带标签的沙盘字符串,该表明式通常是一个函数,它会在模板字符串处理后被调用,在出口最后结出前,你都得以在通过该函数对模板字符串来展开操作处理。

多行字符串、表明式插补

动用普通字符串,换行需要\n,插入表明式需要分段:

    var a = 5;    
    var b = 10;    
    console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");    
    // "Fifteen is 15 and    
    // not 20."

现在透过沙盘字符串,我们可以利用一种更优雅的措施来代表(换行也可以用\n):

    var a = 5;    
    var b = 10;    
    console.log(`Fifteen is ${a + b} and    
    not ${2 * a + b}.`);   
    // "Fifteen is 15 and    
    // not 20."

带标签的沙盘字符串

模板字符串的一种更尖端的格局称为带标签的模版字符串。它同意你通过标签函数修改模板字符串的输出。标签函数的率先个参数是一个分包了字符串字面值的数组(在本例中分头为“Hello”和“world”);第二个参数,在率先个参数后的每一个参数,都是早已被处理好的更迭表达式(在此间分别为“15”和“50”)。 最终,标签函数再次回到处理好的字符串。在后边的言传身教中,标签函数的名称可以为随意的法定标示符。

    var a = 5;    
    var b = 10;    
    function tag(strings, ...values) {   
      console.log(strings[0]); // "Hello "   
      console.log(strings[1]); // " world "    
      console.log(values[0]);  // 15
      console.log(values[1]);  // 50   
      return "Bazinga!";  
    }   
    tag`Hello ${ a + b } world ${ a * b}`;    
    // "Bazinga!"

原始字符串

在标签函数的第一个参数中,存在一个独特的特性raw ,我们可以通过它来走访模板字符串的原始字符串。

    function tag(strings, ...values) {
      console.log(strings.raw[0]);     
      // "string text line 1 \\n string text line 2"  
    }   
    tag`string text line 1 \n string text line 2`;

另外,使用String.raw() 方法创设原始字符串和选拔默认模板函数和字符串连接创立是一致的。

    String.raw`Hi\n${2+3}!`;   
    // "Hi\\n5!"

安全性

出于模板字符串可以访问变量和函数,由此不能由不受信任的用户来布局。

    `${console.warn("this is",this)}`; // "this is" Window    
    let a = 10;  
    console.warn(`${a+=20}`); // "30"  
    console.warn(a); // 30

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

41

34 (34)

12/Edge (modern.ie)

未实现

未实现

String对象的情势:

静态方法

String.fromCharCode(num1, …,
numN)

依据指定的 Unicode
编码中的序号值来回到一个字符串,该形式重回一个字符串,而不是一个 String 对象。

  • 尽管绝大部分常用的 Unicode
    值可以用一个 16-bit 数字代表,并且对于绝大部分值 fromCharCode() 再次回到一个字符(即对于绝大部分字符 UCS-2
    值是 UTF-16 的子集),可是为了处理所有的 Unicode 值(至 21
    bits),只用 fromCharCode() 是不足的。
  • 该方法不扶助Unicode码点大于0xFFFF的字符,即传入的参数无法大于0xFFFF,根本原因在于,码点大于0xFFFF的字符(高位编码字符)占用五个字节,而JavaScript只协理五个字节的字符。必须把码点大于0xFFFF的字符拆成三个字符表示。
  • 是因为高位编码字符是用两个没有编码(lower
    value)表示形成的一个字符,因而String.fromCodePoint() (ES6
    草案的一有的)被用来回到这样一对没有编码,从而得以完全代表这么些高位编码字符。

String.fromCodePoint(num1[, …[,
numN]])  ES6

利用指定的unicode参数再次来到一个primitive的字符串。与fromCharCode功效相近,可是协助的Unicode字符更全,但是浏览器补助情状不是太好,目前ie以及safari还不援助。其余,性能并没有fromCharCode快。因为是ES6当中的新定义的特色,所以最近还不相符放置正式产品环境中去拔取。

  • 倘若传入无效的Unicode编码,将会抛出一个RangeError

String.raw(callSite,
…substitutions)  ES6

是一个模板字符串的竹签函数,是用来获取一个模板字符串的原始字面量值的。

  • callSite 一个模板字符串的“调用点对象”。
  • substitutions 随意个可选的参数,表示任意个内插表明式对应的值。
  • 假诺第一个参数没有传到一个格式非凡的调用点对象,则会抛出 TypeError 非凡。

  • 像拥有的价签函数一样,你平常不需要把它作为一个见惯司空函数,你只需要把它放在模板字符串后边就可以了,而不是在它背后加个括号和一堆参数来调用它,引擎会替你去调用它:

    String.raw `Hi\n!`;                    
    // "Hi\\n!",这里得到的不是 Hi 后面跟个换行符,而是跟着 \\ 和 n 两个字符   
    String.raw `Hi\u000A!`;                
    // "Hi\\u000A!",同上,这里得到的会是 \\、u、0、0、0、A 6个字符,    
    // 任何类型的转义形式都会失效,保留原样输出,不信你试试.length   
    let name = "Bob";    
    String.raw `Hi\n${name}!`;             
    // "Hi\\nBob!",内插表达式还可以正常运行   
    String.raw({raw: "test"}, 0, 1, 2);    
    // "t0e1s2t",我认为你通常不需要把它当成普通函数来调用

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

41 

34 (34)

未实现

未实现

未实现

实例方法:

跟HTML无关的点子

String.prototype.charAt(index)

回到字符的一定岗位,index :0~length-1。如若指定的 index
值超出了该限量,则赶回一个空字符串。

String.prototype.charCodeAt(index)

回到表示给定索引的字符的Unicode的值。是String.fromCharCode()方法的反操作

  • index 一个压倒等于
    0,小于字符串长度的整数。如若不是一个数值,则默认为 0。
  • 若果指定的 index 小于 0
    或不低于字符串的长度,则 charCodeAt 重返 NaN

  • 重回0到65535期间的平头,代表索引处字符的UTF-16编码单元(在Unicode编码单元表示一个十足的UTF-16编码单元的处境下,UTF-16编码单元匹配Unicode编码单元。否则,比如Unicode
    编码单元 > 0x10000
    的情状下,只好匹配Unicode代理对的首先个编码单元)。倘使你指望赢得整点编码值,使用codePointAt()
  • 留神,charCodeAt 总是回到一个紧跟于 65,536
    的值。这是因为高位编码单元(higher code
    point)使用一对(低位编码(lower valued))代理伪字符(”surrogate”
    pseudo-characters)来表示,从而构成一个当真的字符。由此,为了查看或复制(reproduce)65536
    及以上编码字符的一体化字符,不仅需要拿到 charCodeAt(i) 的值,也急需得到 charCodeAt(i+1) 的值

String.prototype.concat(string2, string3[,
…, stringN])

将一个或五个字符串与原字符串连接合并,形成一个新的字符串并赶回。concat 方法并不影响原字符串。

  • 为了增进性能,强烈提出使用 赋值操作符(+,
    +=)代替 concat 方法

String.prototype.indexOf(searchValue[,
fromIndex])

从字符串对象中回到第一个被发现的给定值的索引值,如若没有找到则赶回-1。indexOf 方法分别轻重缓急写

  • fromIndex 可选 表示调用该措施的字符串中初叶查找的岗位。可以是轻易整数。默认值为
    0。如若 fromIndex < 0 则查找整个字符串(如同传进了
    0)。假如 fromIndex >= str.length,则该措施重回-1,除非被寻找的字符串是一个空字符串,此时回到 str.length。

String.prototype.lastIndexOf(searchValue[,
fromIndex])

从字符串对象中回到最终一个被察觉的给定值的索引值,即使没有找到则赶回-1。

  • fromIndex 从调用该方法字符串的此职务处起首查找。能够是随机整数。默认值为 str.length。倘若为负值,则被用作
    0。假若 fromIndex > str.length,则 fromIndex 被视作 str.length。

String.prototype.localeCompare(compareStr[, locales[,
options]]) 
 新的 locales 、 options 参数要求IE11,Safari不协助

回去一个数字来注脚调用该函数的字符串的排列顺序是否在某个给定的字符串compareStr的前方或者前边,或者是一模一样的(编码中的地方)。在 compareStr 面前时回来负数,作 compareStr 背后时回来正数,相同地方时再次来到0

  • 新的 locales
    、 options 参数能让应用程序定制函数的行为即指定用来排序的语言。  locales 和 options 参数是凭借于现实贯彻的,在旧的实现中这多少个参数是一心被忽略的
  • 翻看浏览器辅助部分来确定咋样浏览器补助 locales 参数和 options 参数, 在职能检测中检查对 locales 、options 参数的支撑。locales 和 options 参数还没有被抱有观察器所支撑。检查是否被帮忙,
    可以给第二个参数传递一个 “i” , 判断是否有万分 RangeError抛出
  • 性能: 当相比较大方字符串时, 比如相比大气数组时, 最好创制一个Intl.Collator 对象并利用compare 属性所提供的函数
  • 该方法会考虑自然语言的排序意况,如将B排在a的眼前,而JavaScript选择的是Unicode码点对比’B'<‘a’

String.prototype.match(regexp)

利用正则表明式与字符串相比较,再次回到一个包含匹配结果的数组,假诺没有匹配项,则赶回 null。当字符串匹配到正则表明式时,match() 方法会提取匹配项。

  • 参数regexp 是一个正则表明式对象。如若传入一个非正则表明式对象,则会隐式地运用 new RegExp(obj) 将其更换为正则表明式对象
  • 假诺正则表明式没有 g 标志,重临和 RegExp.exec(str) 相同的结果。而且回去的数组拥有一个异常的 input 属性,该属性包含原始字符串。此外,还兼具一个 index 属性,该属性表示万分结果在原字符串中的索引(以0起始)。

String.prototype.replace(regexp|substr, newSubStr| function)

被用来在正则表达式和字符串直接相比较,然后用新的子串来替换被匹配的子串。该办法并不转移调用它的字符串本身,而只是回去一个新的更迭后的字符串。

  • regexp (pattern)一个 RegExp 对象。该正则所匹配的情节会被第二个参数的回到值替换掉。
  • substr (pattern)一个要被 newSubStr 替换的字符串。
  • newSubStr (replacement)用以替换掉第一个参数在原字符串中的匹配部分的 String。该字符串中得以内插一些特其它变量名。参考下边的利用字符串作为参数。
  • function (replacement)一个用来制造新子字符串的函数,该函数的重回值将替换掉第一个参数匹配到的结果。参考下面的指定一个函数作为参数。

利用字符串作为参数: 替换字符串newSubStr可以插入下面的特种变量名:

变量名

代表的值

$$

插入一个 "$"。

$&

插入匹配的子串。

$`

插入当前匹配的子串左边的内容。

$’

插入当前匹配的子串右边的内容。

$n

假如第一个参数是 RegExp对象,并且 n 是个小于100的非负整数,那么插入第 n 个括号匹配的字符串。

下边的事例沟通一个字符串中六个单词的职务,这些本子使用$1 和
$2 代表替换文本

        var re = /(\w+)\s(\w+)/;      
        var str = "John Smith";       
        var newstr = str.replace(re, "$2, $1");      
        console.log(newstr);

您可以指定一个函数作为第二个参数。在这种气象下,当匹配执行后,
该函数就会实施。 函数的重临值作为替换字符串。 (注意:
 下面提到的奇异替换参数在这边无法被使用。) 其它要小心的是,
假诺第一个参数是正则表明式, 并且其为全局匹配格局,
那么那一个艺术将被频繁调用, 每趟匹配都会被调用。

下面是该函数的参数:

变量名

代表的值

match

匹配的子串。(对应于上述的$&。)

p1,p2, …

假如replace()方法的第一个参数是一个RegExp 对象,则代表第n个括号匹配的字符串。(对应于上述的$1,$2等。)

offset

匹配到的子字符串在原字符串中的偏移量。(比如,如果原字符串是“abcd”,匹配到的子字符串时“bc”,那么这个参数将时1)

string

被匹配的原字符串。

(精确的参数个数看重于replace()的第一个参数是否是一个正则表明式对象,
以及那个正则表明式中指定了略微个括号子串。)上面的例证使 newString 变成’abc – 12345 – #$*%’:

        function replacer(match, p1, p2, p3, offset, string) {     
          // p1 is nondigits, p2 digits, and p3 non-alphanumerics      
          return [p1, p2, p3].join(' - ');      
        }     
        var newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);

String.prototype.search(regexp)

对正则表明式和点名字符串举办匹配搜索,重临首个冒出的匹配项的下标。如果匹配成功,则 search() 再次来到正则表明式在字符串中第一次匹配项的目录。否则,返回-1。假设参数是字符串,和indexOf方法一致

  • regexp 查找的字符串或者正则表明式对象。假诺传入一个非正则表明式对象,则会拔取new RegExp(obj) 隐式地将其更换为正则表明式对象。

String.prototype.slice(beginSlice[, endSlice])

采用一个字符串区域(从beginSlice到endSlice,不含endSlice),,再次回到一个新的字符串。

  • beginSlice从该索引(以 0
    为基数)处先导提取原字符串中的字符。假设值为负数,会被当做 sourceLength +
    beginSlice 看待,这里的sourceLength 是字符串的长度 (例如, 假诺beginSlice 是 -3 则作为是: sourceLength – 3)
  • endSlice可选。在该索引(以 0
    为基数)处结束提取字符串。假设省略该参数,slice会一贯提取到字符串末尾。假如该参数为负数,则被作为是
    sourceLength + endSlice,这里的 sourceLength
    就是字符串的尺寸(例如,假如 endSlice 是 -3,则是, sourceLength –
    3)。

String.prototype.split([separator][,
limit])

透过separator将字符串分离成子串,重返由子串组成的数组。

  • separator指定用来分割字符串的字符(串)。separator 可以是一个字符串或正则表达式。 当找到一个 seperator时,separator 会从字符串中被移除,重回存进一个数组当中的子字符串。如若疏忽 separator 参数,则赶回的数组只含有一个要素,该因素是原字符串。倘使 separator 是一个空字符串,则 str 将被更换为由字符串中字符组成的一个数组。
  • 假诺 separator 是一个正则表明式,且富含捕获括号(capturing
    parentheses),则每一次匹配到 separator 时,捕获括号匹配的结果将会插入到重临的数组中。但是,不是有着浏览器都补助该特性

  • limit一个平头,限定重返的分开片段数量。split 方法依旧分割每一个配合的 separator,但是回到的数组只会截取最多 limit 个元素。
  • 当字符串为空时,split 再次来到一个蕴含一个空字符串的数组,而不是一个空数组。

String.prototype.substr(start[,
length])

回去字符串中从指定地点上马的指定长度的子字符串.

  • start起先提取字符的岗位。假使为负值,则被视作 strLength
    + start,其中 strLength 为字符串的尺寸(例如,假使 start 为 -3,则被当作 strLength-3)。注意负的 start 参数不被 Microsoft JScript
    所协助,需要Polyfill补助

  • length可选。提取的字符数。
  • 假使 start 为正值,且高于或等于字符串的长度,则 substr 重临一个空字符串
  • 假若 length 为 0 或负值,则 substr 重回一个空字符串。如若忽视 length,则 substr 提取字符,直到字符串末尾。

String.prototype.substring(indexStart[,
indexEnd])

回来字符串六个目录之间(或到字符串末尾)的子串。

substring 提取从 indexStart 到 indexEnd(不包括)之间的字符。特别地:

  • 假如 indexStart 等于 indexEnd,substring 再次回到一个空字符串。
  • 如果简单 indexEnd,substring 提取字符一向到字符串末尾。
  • 假设任一参数小于 0 或为 NaN,则被看做
    0。
  • 假若任一参数大于 stringName.length,则被视作 stringName.length。
  • 万一 indexStart 大于 indexEnd,则 substring 的实践效劳就像多少个参数交流了同样。例如,str.substring(1, 0) ==
    str.substring(0, 1),
  • 从而不提议采纳这个情势,优先选拔slice

String.prototype.toLocaleLowerCase()

基于当前区域安装,将符串中的字符转换成小写。对于绝大多数言语来说,toLowerCase的重回值是同样的。

String.prototype.toLocaleUpperCase()

据悉目前区域设置,将字符串中的字符转换成大写,对于多数言语来说,toUpperCase的重返值是同等的。

String.prototype.toLowerCase()

将字符串转换成小写并回到。

String.prototype.toString()

回到用字符串表示的特定对象。重写 Object.prototype.toString 方法。

String.prototype.toUpperCase()

将字符串转换成大写并重返。

String.prototype.trim()  IE9

回到一个刨除了字符串两端的空白字符的新字符串,包括持有的空格字符 (space, tab, no-break space
等)以及所有的行截至符(如 LF,CR)。

匹配写法:

        if (!String.prototype.trim) {      
          String.prototype.trim = function () {       
            return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');       
          };       
        }

String.prototype.valueOf()

重回特定对象的原始值。重写 Object.prototype.valueOf 方法。

HTML wrapper methods

上面的方法被限定使用,因为只对可用的HTML表情和总体性提供部分扶助。

String.prototype.startsWith(searchString [,
position])  ES6
IE无 有Polyfill

认清字符串的前奏地方是不是配合其他字符串中的字符。

  • searchString要摸索的子字符串。
  • position在 str 中寻找 searchString 的先河地点,默认值为
    0,也就是确实的字符串开端处。

String.prototype.endsWith(searchString [,
position]) ES6

ECMAScript,认清当前字符串是否是以此外一个加以的子字符串“结尾”的。可选的position 在 str 中追寻 子串searchString
的终结地点,默认值为 str.length,也就是的确的字符串结尾处。

String.prototype.codePointAt() ES6

重回使用UTF-16编码的加以地方的值的非负整数。

String.prototype.includes(searchString[, position])  ES6

判断一个字符串是否含有另一个子字符串,虽然是回来true,否则再次来到false。position 可选,从脚下字符串的哪位索引地方上马搜寻子字符串;默认为0。includes() 是分别轻重缓急写的。Polyfill:

        if (!String.prototype.includes) {      
          String.prototype.includes = function(search, start) {
            'use strict';      
            if (typeof start !== 'number') {
             start = 0;      
            }     
            if (start + search.length > this.length) {
              return false;     
            } else {     
              return this.indexOf(search, start) !== -1;      
            }     
          };      
        }

String.prototype.normalize()  ES6

再次回到调用字符串值的Unicode标准化形式。

String.prototype.repeat(count)  ES6 有Polyfill

布局并回到一个双重当前字符串若干次数的新字符串对象。count 介于0和正无穷大之间的整数 : [0, +∞)
。表示在新协会的字符串中另行了不怎么遍原字符串。

  • RangeError: 重复次数不可能为负数。
  • RangeError: 重复次数必须低于 infinity,且长度不会压倒最长的字符串。

下边的方法被限制使用,因为只对可用的HTML表情和属性提供部分扶助:

String.prototype.anchor(name)

创制一个 <a> HTML
锚元素,被看作超文本靶标,name表示被创设的价签的 name 属性。

  • 采用 anchor 方法能够以编程模式在一个文档中开创和呈现一个锚链接。
<a name="name"> text</a>
  • 语法上来讲,字符串表示您想让用户看到的公文。name 字符串参数表示 <a> 元素的 name 属性。
  • 行使 anchor
    方法创制的锚点(anchors)将会化为 document.anchors 数组的因素

String.prototype.bold()

创设 HTML 元素
“b”,并将字符串加粗体现。将一个字符串嵌入到<b></b>标记中

String.prototype.link(url)

动用 link 方法创造一个超链接 HTML
片段。再次来到的字符串能够通过 document.write 或 element.innerHTML 方法添加到文档中。

  • url任何可以指定 a 标签的 href 属性的字符串;它应有是行得通的
    URL(相对或绝对),任何 & 字符将会被转义为 &,任何 ” 字符将会被转义为 "。
  • 采取 link 方法成立的链接将会变成 document.links
    数组中的元素。查看 document.links