11 个你应该知道的JavaScript 字符串的基础知识

英文 | https://medium.com/dailyjs/javascript-strings-10-fundamentals-you-should-know-d29e6e5f3a1a

今天这篇文章眼于 JavaScript 中字符串的 11 个最重要的知识。

1. 使用单引号和双引号创建字符串

字符串可以用单引号和双引号定义。

"text"
'text'

他们都创建了几乎相同的字符串。

"text" === 'text'
//true

这样的字符串必须适合单行，我们不能以这种方式定义跨越多行的字符串。

当字符串用双引号定义时，我们需要转义其中的其他双引号。 \（反斜杠）用于转义字符。

"text with \"double quotes\" inside"

用单引号定义字符串时，不需要对双引号进行转义。

'text with "double quotes" inside'

用双引号定义字符串时也是如此，这意味着我们不需要在其中转义单引号。

"text with single 'quotes' "

包含相同文本的两个字符串相等。

"Text" === "Text"
//true

\（反斜杠）也用于在字符串中包含 \ 字符或换行符。

"The first line\nThe second line"

2.字符串是不可变的

确实，一旦声明的字符串不能更改，所有字符串方法都不能更改源字符串，他们总是创造一个新的文本。

考虑下一个例子， replace 方法不会更改当前字符串，而是创建一个新字符串。

replace 方法在字符串中搜索指定的子字符串，并返回替换给定子字符串的新字符串。当使用字符串作为第一个参数调用时，它仅替换第一次出现。

const str = "abc";


const newStr = str.replace("a", "A");


console.log(str);
//"abc"
console.log(newStr)
//"Abc"

字符串中的字符可以像在数组中一样使用括号内的索引进行访问，这可能会给人一种印象，即我们可以更改该索引处的字符。这是一个错误的假设，字符串中的字符不能更改。

const text = 'ABC';
text[0] = 'X';
//TypeError: Cannot assign to read only property '0' of string 'ABC'

4. 字符串看起来有方法

JavaScript 允许我们调用字符串上的方法，给人一种他们是某种对象的错觉。字符串不是对象。当我们在字符串上调用方法时，JavaScript 使用内置的 String 构造函数创建一个包装对象，并在新创建的对象上调用该方法。

例如，在字符串上调用 trim 方法在幕后看起来像这样。

new String(" text ").trim();

trim 方法删除字符串开头和结尾之后的空格。删除所有空白字符，包括空格、制表符、换行符。

const text = " \t\ntext\n\t ";
const newText = text.trim();
//"text"

所有字符串方法都在 String.prototype 对象上定义。

5. 内置String函数可以将任意值转换成字符串

事实上，我们可以使用 String 内置函数将任何类型的值转换为字符串。它是将原始类型转换为字符串的最佳选择。检查下一个示例：

String(0)
//'0'


String(true)
//'true'


String(null)
//'null'


String(undefined)
//'undefined'


String([1,2,3])
//'1,2,3'


String({ msg: 'Hi'})
//'[object Object]'


String(Symbol('id'))
//'Symbol(id)'

如你所见，所有约定看起来都很好，除了转换为原始通用字符串“[object Object]”的对象。甚至数组也被转换为一个漂亮的字符串，其所有值都用逗号分隔。

6. + 运算符同时进行加法和连接

当其中一个操作数是字符串时，加号运算符 (+) 成为连接运算符。检查下一个示例。

"A" + " " + "text"
//"A text"


1 + "2"
//"12"

concat 方法可以实现类似的行为，它将所有字符串参数连接到当前字符串并返回一个新字符串。

"A".concat("B")
//"AB"


"A".concat(" ", "text")
//"A text"


"1".concat(2)
//"12"

7. 字符串可以与数组相互转换

split 方法根据分隔符将文本拆分为子字符串数组。下面是一个例子。

const quote = 'Winter is coming';
const words = quote.split(' ');
//["Winter", "is", "coming"]

这是使用逗号作为分隔符来拆分文本的另一个示例。

const csv = 'Fire,and,Blood';
const arr = csv.split(',');
//["Fire", "and", "Blood"]

join 数组方法通过使用指定的字符串分隔符字符串连接数组中的所有元素来创建一个新字符串。如果没有提供分隔符，则默认使用逗号。

下面是一个例子。

const arr = ['Fire', 'and', 'Blood'];
const text = arr.join(' ');
//'Fire and Blood'

8. 方法允许检测字符串中是否包含子字符串

indexOf 方法返回字符串中指定文本第一次出现的索引。当找不到文本时，它返回-1。

const quote = "Here we stand";
const firstIndex = quote.indexOf(" ");
console.log(firstIndex) //4

lastIndexOf 方法返回字符串中指定文本最后一次出现的索引，当找不到文本时，它返回-1。

const quote = "Here we stand";
const lastIndex = quote.lastIndexOf(" ");
console.log(lastIndex) //7

startsWith 方法检查字符串是否以给定的子字符串开头并返回一个布尔值 (true/false)。 startsWith 方法区分大小写。

const quote = "First in Battle";
console.log(quote.startsWith("First"));
//true

endsWith 方法检查字符串是否以给定的子字符串结尾，并根据需要返回 true 或 false。

const quote = "We Remember";
console.log(quote.endsWith("We"));
//false

include 方法检查字符串是否包含给定的子字符串，并根据需要返回 true 或 false。

const quote = "Our Blades are Sharp";
console.log(quote.includes("are"));
//true

9. 3种方法允许提取字符串的一部分

有 3 种方法，可能太多，用于提取字符串的一部分。

substr(start, length) 方法提取字符串的一部分，从指定的索引开始并返回指定的字符数。第一个字符位于索引 0 处。

const quote = "Winter is coming";


const part1 = quote.substr(0, 6);
//Winter


const part2 = quote.substr(10, 6);
//coming

起始索引是必需的，但长度是可选的。如果省略，它将提取字符串的其余部分。

const quote = "Winter is coming";
const part = quote.substr(6);
// is coming

substring(start, end) 方法返回开始和结束索引之间的字符串部分。它以起始索引处的字符开始并结束，但不包括结束索引处的字符。

const quote = "We Stand Together";
const part = quote.substring(3, 8);
// Stand

如果省略结束索引，它会提取到字符串的末尾。

const quote = "We Stand Together";
const part = quote.substring(3);
// Stand Together

这与 indexOf 方法结合使用效果很好。考虑以下代码提取第一个逗号后的文本。

const quote = "You know nothing,Jon Snow";


const commaIndex = quote.indexOf(",");


const part = quote.substring(commaIndex + 1);
//"Jon Snow"

slice 与 substring 具有相同的接口，并且基本上是为了模仿数组接口而添加的。

10. 模板字符串允许嵌入表达式

模板字符串文字可以创建跨越多行并允许插值的字符串。

模板字符串使用反引号 (`) 字符定义。

`Wisdom 
 and 
 Strength`

有效的表达式可以放在模板字符串文字中，表达式被评估并转换为字符串。

const word = "Awake";
`${word}! ${word}!`
//"Awake! Awake!"

11. 使用 Unicode UTF-16 表示字符串

使用一个或多个 UTF-16 代码单元存储一个字符。

length 属性被称为返回字符串中的字符数，但它实际上返回的是 UTF-16 单元的数量，仅当每个字符都适合 16 位时，它才返回字符数，否则返回一个大数字。

const word = 'Hi';
console.log(word.length)
//2

考虑下一个显示需要存储 2 x 16 位的表情符号字符的示例。

const word = 'Hi🙂';
console.log(word.length)
//4

如你所见，在这种情况下，长度属性不能正确表示字符数。

charAt 方法返回一个新字符串，其中包含位于给定索引处的单个 UTF-16 代码单元，这清楚地表明我们只能读取特定索引处的代码单元。

const word = 'Hi;
console.log(word.charAt(0))
//H

但是，charAt 无法正确返回表情符号字符，因为它使用 2 个代码单元。

const word = 'Hi🙂';
console.log(word.charAt(2))
//�

为了获得正确的大小和索引访问，我们需要将字符串转换为字符数组。

请注意，当使用空字符串作为分隔符时，split 方法不会正确地将字符串转换为字符数组。

const word = 'Hi🙂';
const chars = word.split("");
//["H", "i", "�", "�"]

Array.from 实用程序从类数组或可迭代对象创建一个新数组。

类数组对象具有索引访问和长度属性，但没有数组方法，字符串是一个类似数组的对象。

Array.from 处理字符超过 16 位的情况，一旦我们有了字符数组，我们就可以正确计算字符串中的字符数。

const word = 'Hi🙂';
const chars = Array.from(word);


console.log(word.length);
//4
console.log(chars.length);
//3

当字符串被正确地转换为字符数组时，即使需要两个代码单元来表示，我们也可以准确地访问给定索引处的字符。

console.log(chars[2]);
//🙂

写在最后

今天的内容到这里就结束了，希望这篇文章对你有用，另外，如果你觉得有帮助的话，请点赞我，关注我，并将它与你的开发者朋友一起来分享它，感谢你的阅读，编程愉快！

学习更多技能

请点击下方公众号