工具站工具站
Bing
◆

JavaScript String 字符串类型详解

2023-02-02 01:370

概述

单引号字符串的内部，可以使用双引号。双引号字符串的内部，可以使用单引号

'key = "value"';
"It's a long journey";

如果要在单引号字符串的内部，使用单引号，就必须在内部的单引号前面加上反斜杠，用来转义。双引号字符串内部使用双引号，也是如此。

'Did she say \'Hello\'?';
// "Did she say 'Hello'?"

"Did she say \"Hello\"?";
// "Did she say "Hello"?"

字符串默认只能写在一行内，分成多行将会报错。

'a
b
c
'
// SyntaxError: Unexpected token ILLEGAL

如果长字符串必须分成多行，可以在每一行的尾部使用反斜杠。 注意，反斜杠的后面必须是换行符，而不能有其他字符（比如空格），否则会报错。

var longString =
  'Long \
long \
long \
string';

console.log(longString);
// "Long long long string"

连接运算符（+）可以连接多个单行字符串，将长字符串拆成多行书写，输出的时候也是单行。

var longString = 'Long ' + 'long ' + 'long ' + 'string';

字符串与数组

字符串可以被视为字符数组，因此可以使用数组的方括号运算符，用来返回某个位置的字符

var s = 'hello';
s[0]; // "h"
s[1]; // "e"
s[4]; // "o"

// 直接对字符串使用方括号运算符
'hello'[1]; // "e"

如果方括号中的数字超过字符串的长度，或者方括号中根本不是数字，则返回 undefined。

'abc'[3]; // undefined
'abc'[-1]; // undefined
'abc'['x']; // undefined

无法改变字符串之中的单个字符

var s = 'hello';

delete s[0];
s; // "hello"

s[1] = 'a';
s; // "hello"

s[5] = '!';
s; // "hello"

length 属性

length 属性返回字符串的长度，该属性也是无法改变的。

var s = 'hello';
s.length; // 5

s.length = 3;
s.length; // 5

s.length = 7;
s.length; // 5

Base64 转码

btoa()：任意值转为 Base64 编码 atob()：Base64 编码转为原来的值

var string = 'Hello World!';
btoa(string); // "SGVsbG8gV29ybGQh"
atob('SGVsbG8gV29ybGQh'); // "Hello World!"

这两个方法不适合非 ASCII 码的字符，会报错

btoa('你好'); // 报错

将非 ASCII 码字符转为 Base64 编码需配合 encodeURIComponent 与 decodeURIComponent

function b64Encode(str) {
  return btoa(encodeURIComponent(str));
}

function b64Decode(str) {
  return decodeURIComponent(atob(str));
}

b64Encode('你好'); // "JUU0JUJEJUEwJUU1JUE1JUJE"
b64Decode('JUU0JUJEJUEwJUU1JUE1JUJE'); // "你好"

字符串对象

String 对象是 JavaScript 原生提供的三个包装对象之一，用来生成字符串对象。

基本字符串和字符串对象的区别

  • 通过单引号或双引号和直接调用 String 方法(没有通过 new 生成字符串对象实例)的字符串都是基本字符串。
  • 当基本字符串需要调用一个字符串对象才有的方法或者查询值的时候(基本字符串是没有这些方法的)， JavaScript 会自动将基本字符串转化为字符串对象并且调用相应的方法或者执行查询。
let fx = 'Fx is a great girl';
let fx1 = new String('Fx is a great girl');

console.log(typeof fx); // string
console.log(typeof fx1); // object

字符串对象是一个类似数组的对象

console.log(new String('abc'));
// String {0: "a", 1: "b", 2: "c", length: 3}

new String('abc')[1]; // "b"

字符串的长度

console.log('Fx is a great girl'.length); // 19

静态方法

String.fromCharCode(num1, ..., numN)

返回由指定的 UTF-16 代码单元序列创建的字符串

// ABC
console.log(String.fromCharCode(65, 66, 67));
// —
console.log(String.fromCharCode(0x2014));

实例方法

charCodeAt()

返回 0 到 65535 之间的整数 表示给定索引处的 UTF-16 代码单元

// 70(F)
console.log('Fx is a great girl'.charCodeAt(0));
// 120(x)
console.log('Fx is a great girl'.charCodeAt(1));

charAt()

从一个字符串中返回指定的字符（这个方法完全可以用数组下标替代）

// F
console.log('Fx is a great girl'.charAt(0));
// l
console.log('Fx is a great girl'.charAt('Fx is a great girl'.length - 1));

concat()

将一个或多个字符串与原字符串连接合并，形成一个新的字符串并返回（不改变原字符串）。

// fx is a great girl yes。
console.log('Fx is a great girl'.concat(' ', 'yes', '。'));

如果参数不是字符串，concat 方法会将其先转为字符串，然后再连接。

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

''.concat(one, two, three); // "123"
one + two + three; // "33"

endsWith(val, length)

用来判断当前字符串是否是以另外一个给定的子字符串结尾的，根据判断结果返回 true 或 false。length 可选参数(作为 str 的长度)

// true
console.log('Fx is a great girl'.endsWith('girl'));
// false
console.log('Fx is a great girl'.endsWith('girl', 10));
// true
console.log('Fx is a great girl'.endsWith('g', 10));

startsWith(searchString, position)

用来判断当前字符串是否以另外一个给定的子字符串开头，并根据判断结果返回 true 或 false。这个方法区分大小写。

  • searchString：要搜索的子字符串。
  • position 可选：在 str 中搜索 searchString 的开始位置，默认值为 0，也就是真正的字符串开头处。
// true
console.log('Fx is a great girl'.startsWith('Fx'));
// false
console.log('Fx is a great girl'.startsWith('Fx', 1));
// true
console.log('Fx is a great girl'.startsWith('x', 1));

includes(val, position)

  • 用于判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false。
  • 区分大小写，val 要在此字符串中搜索的字符串。position 可选。从当前字符串的哪个索引位置开始搜寻子字符串，默认值为 0。
// false
console.log('Fx is a great girl'.includes('fx'));
// true
console.log('Fx is a great girl'.includes('Fx'));
// false
console.log('Fx is a great girl'.endsWith('Fx', 10));

indexOf(val, fromIndex)

  • 返回调用它的 String 对象中第一次出现的指定值的索引，从 fromIndex 处进行搜索。如果未找到该值，则返回 -1。
  • fromIndex 表示开始查找的位置。可以是任意整数，默认值为 0。
  • 如果 fromIndex 小于 0，则查找整个字符串（等价于传入了 0）。
  • 如果 fromIndex 大于等于 str.length，则必返回 -1。
// -1
console.log('Fx is a great girl'.indexOf('fx'));
// 3
console.log('Fx is a great girl'.indexOf('is'));
// 0
console.log('Fx is a great girl'.indexOf(''));
// 0
console.log('Fx is a great girl'.indexOf('', -1));
// 10
console.log('Fx is a great girl'.indexOf('', 10));
// 18
console.log('Fx is a great girl'.indexOf('', 30));
// 3
console.log('Fx is a great girl'.indexOf('is', -1));
// 3
console.log('Fx is a great girl'.indexOf('is', 3));
// -1
console.log('Fx is a great girl'.indexOf('is', 10));
// -1
console.log('Fx is a great girl'.indexOf('is', 30));

lastIndexOf(val, fromIndex)

  • 返回调用 String 对象的指定值最后一次出现的索引
  • 在一个字符串中的指定位置 fromIndex 处从后向前搜索。如果没找到这个特定值则返回 -1 。
  • 从 str 的第 fromIndex 位开始向左回向查找。
  • fromIndex 默认值是 +Infinity。
  • 如果 fromIndex >= str.length，则会搜索整个字符串。如果 fromIndex < 0 ，则等同于 fromIndex == 0。
// returns 3 （没有指明fromIndex则从末尾l处开始反向检索到的第一个a出现在l的后面，即index为3的位置）
'canal'.lastIndexOf('a');
// returns 1（指明fromIndex为2则从n处反向向回检索到其后面就是a，即index为1的位置）
'canal'.lastIndexOf('a', 2);
// returns -1(指明fromIndex为0则从c处向左回向检索a发现没有，故返回-1)
'canal'.lastIndexOf('a', 0);
// returns -1
'canal'.lastIndexOf('x');
// returns 0（指明fromIndex为-5则视同0，从c处向左回向查找发现自己就是，故返回0）
'canal'.lastIndexOf('c', -5);
// returns 0（指明fromIndex为0则从c处向左回向查找c发现自己就是，故返回自己的索引0）
'canal'.lastIndexOf('c', 0);
// returns 5
'canal'.lastIndexOf('');
// returns 2
'canal'.lastIndexOf('', 2);
// 将返回 2 而不是 0, 因为fromIndex只限制待匹配字符串的开头。
'abab'.lastIndexOf('ab', 2);

repeat(count)

  • 构造并返回一个新字符串，该字符串包含被连接在一起的指定数量的字符串的副本。
  • 参数（count）：介于 0 和正无穷大之间的整数 : [0, +∞) 。表示在新构造的字符串中重复了多少遍原字符串。
// ""
console.log('Fx is a great girl'.repeat(0));
// Fx is a great girl
console.log('Fx is a great girl'.repeat(1));
// Fx is a great girlFx is a great girl
console.log('Fx is a great girl'.repeat(2));
// Fx is a great girlFx is a great girl
console.log('Fx is a great girl'.repeat(2.2));
// Fx is a great girlFx is a great girlFx is a great girl
console.log('Fx is a great girl'.repeat(3.8));
// Invalid count value
console.log('Fx is a great girl'.repeat(-1));

slice(beginIndex, endIndex)

  • 提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串。
  • beginIndex:从该索引（以 0 为基数）处开始提取原字符串中的字符。如果值为负数，会被当做 strLength + beginIndex 看待， 这里的 strLength 是字符串的长度（例如， 如果 beginIndex 是 -3 则看作是：strLength - 3）
  • endIndex:可选。在该索引（以 0 为基数）处结束提取字符串,不包含此位置。 如果省略该参数，slice() 会一直提取到字符串末尾。如果该参数为负数，则被看作是 strLength + endIndex， 这里的 strLength 就是字符串的长度(例如，如果 endIndex 是 -3，则是, strLength - 3)。
// Fx is a great girl
console.log('Fx is a great girl'.slice(0));
//  is a great girl
console.log('Fx is a great girl'.slice(2));
// i
console.log('Fx is a great girl'.slice(3, 4));
//  is
console.log('Fx is a great girl'.slice(2, 5));
// l
console.log('Fx is a great girl'.slice(-1));
// Fx is a great girl
console.log('Fx is a great girl'.slice(-19));
// Fx is a great gir
console.log('Fx is a great girl'.slice(-19, -1));

substring(indexStart, indexEnd)

返回一个字符串在开始索引到结束索引之间的一个子集, 或从开始索引直到字符串的末尾的一个子集。

  • indexStart：需要截取的第一个字符的索引，该字符作为返回的字符串的首字母。
  • indexEnd：可选。一个 0 到字符串长度之间的整数，以该数字为索引的字符不包含在截取的字符串内。
  • 如果 indexStart 等于 indexEnd，substring 返回一个空字符串。
  • 如果省略 indexEnd，substring 提取字符一直到字符串末尾。
  • 如果任一参数小于 0 或为 NaN，则被当作 0。
  • 如果任一参数大于 stringName.length，则被当作 stringName.length。
  • 如果 indexStart 大于 indexEnd，则 substring 的执行效果就像两个参数调换了
// Fx is a great girl
console.log('Fx is a great girl'.substring(0));
//  Fx
console.log('Fx is a great girl'.substring(0, 2));
// ''
console.log('Fx is a great girl'.substring(0, -1));
// Fx
console.log('Fx is a great girl'.substring(2, -10));
// ''
console.log('Fx is a great girl'.substring(-1, -10));
// x is a great girl
console.log('Fx is a great girl'.substring(1, 200));
// Fx
console.log('Fx is a great girl'.substring(2, NaN));
// ''
console.log('Fx is a great girl'.substring(2, 2));

由于 substring 的某些规则违反直觉，因此不建议使用 substring 方法，应该优先使用 slice。

match(regexp)

  • 检索返回一个字符串匹配正则表达式的的结果。
  • regexp 一个正则表达式对象。如果传入一个非正则表达式对象，则会隐式地使用 new RegExp(obj) 将其转换为一个 RegExp 。 如果你没有给出任何参数并直接使用 match() 方法 ，你将会得到一 个包含空字符串的 Array ：[""] 。
  • 如果使用 g 标志，则将返回与完整正则表达式匹配的所有结果，但不会返回捕获组。如果未使用 g 标志， 则仅返回第一个完整匹配及其相关的捕获组（Array）。在这种情况下，返回的项目将具有如下所述的其他属性。

split(separator, limit)

  • 使用指定的分隔符字符串将一个 String 对象分割成字符串数组，以将字符串分隔为子字符串，以确定每个拆分的位置。
  • separator:指定表示每个拆分应发生的点的字符串。 separator 可以是一个字符串或正则表达式。
    • 如果纯文本分隔符包含多个字符，则必须找到整个字符串来表示分割点。
    • 如果在 str 中省略或不出现分隔符，则返回的数组包含一个由整个字符串组成的元素。
    • 如果分隔符为空字符串，则将 str 原字符串中每个字符的数组形式返回。
  • limit:一个整数，限定返回的分割片段数量。当提供此参数时，split 方法会在指定分隔符的每次出现时分割该字符串， 但在限制条目已放入数组时停止。如果在达到指定限制之前达到字符串的末尾，它可能仍然包含少于限制的条目。新数组中不返回剩下的文本。
  • 返回值：返回源字符串以分隔符出现位置分隔而成的一个 Array
var myString = 'Hello World. How are you doing?';
var splits = myString.split(' ', 3);
// ["Hello", "World.", "How"]
console.log(splits);

padStart()

  • 用另一个字符串填充当前字符串(重复，如果需要的话)，以便产生的字符串达到给定的长度。填充从当前字符串的开始(左侧)应用的。
  • targetLength：当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。
  • padString：可选，填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分， 其他部分会被截断。此参数的缺省值为 " "。
  • 返回值：在原字符串开头填充指定的填充字符串直到目标长度所形成的新字符串。
// "       abc"
'abc'.padStart(10);
// "foofoofabc"
'abc'.padStart(10, 'foo');
// "123abc"
'abc'.padStart(6, '123465');
// "00000abc"
'abc'.padStart(8, '0');
// "abc"
'abc'.padStart(1);

padEnd()

  • 用一个字符串填充当前字符串（如果需要的话则重复填充），返回填充后达到指定长度的字符串。从当前字符串的末尾（右侧）开始填充。
  • targetLength：当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。
  • padString：可选，填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。此参数的缺省值为 " "（U+0020）。
  • 返回值：在原字符串末尾填充指定的填充字符串直到目标长度所形成的新字符串。
// "abc       "
'abc'.padEnd(10);
// "abcfoofoof"
'abc'.padEnd(10, 'foo');
// "abc123"
'abc'.padEnd(6, '123456');
// "abc"
'abc'.padEnd(1);

toString()

  • 返回指定对象的字符串形式。
  • String 对象覆盖了 Object 对象的 ### 方法；并没有继承 Object.###()。 对于 String 对象，toString 方法返回该对象的字符串形式，和 String.prototype.valueOf() 方法返回值一样。
var x = new String('Hello world');
// 输出 "Hello world
console.log(x.toString());

trim()

会从一个字符串的两端删除空白字符。在这个上下文中的空白字符是所有的空白字符 (space, tab, no-break space等) 以及所有行终止符字符（如 LF，CR）。

var orig = '   foo  ';
// 'foo'
console.log(orig.trim());
// 另一个.trim()例子，只从一边删除
var orig = 'foo    ';
// 'foo'
console.log(orig.trim());

trimRight()

从一个字符串的右端移除空白字符。

trimStart()

从字符串的开头删除空格。trimLeft() 是此方法的别名。

toLocaleLowerCase()

根据任何特定于语言环境的案例映射，返回调用字符串值转换为小写的值。

toLocaleUpperCase()

使用本地化的大小写映射规则将输入的字符串转化成大写形式并返回结果字符串。

toLowerCase()

会将调用该方法的字符串值转为小写形式，并返回。

toUpperCase()

将调用该方法的字符串值转换为大写形式，并返回。

toLocaleLowerCase()/toLocaleUpperCase()

  • 返回调用该方法的字符串被转换成小写之后的值，转换规则根据任何本地化特定的大小写映射。
  • toLocaleLowerCase()/toLocaleUpperCase() 并不会影响字符串自身的值。
  • 在大多数情况下，该方法产生的结果和调用 toLowerCase()/toUpperCase() 的结果相同，
  • 但是在某些本地环境中，比如土耳其语，它的大小写映射并不遵循在 Unicode 中的默认的大小写映射，因此会有一个不同的结果。

at()

接受一个整数作为参数，返回参数指定位置的字符，支持负索引（即倒数的位置）。

如果参数位置超出了字符串范围，at()返回 undefined。

const str = 'hello';
str.at(1); // "e"
str.at(-1); // "o"
💬留言板0

还没有留言，来发表第一条吧～

PAGE LOAD / LIVEJavaScript String 字符串类型详解加载中
全屏