服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - 11 个你应该知道的JavaScript 字符串的基础知识

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

2022-10-13 17:35web前端开发 js教程

今天这篇文章眼于 JavaScript 中字符串的 11 个最重要的知识。有需要的朋友可以参考下

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

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

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

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

"text" 'text'

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

"text" === 'text'

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

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

"text with \"double quotes\" inside"

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

'text with "double quotes" inside

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

"text with single 'quotes' "

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

"Text" === "Text"

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

"The first line\nThe second line"

2.字符串是不可变的

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

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

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

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

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

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();

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

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

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

String(0) String(true) String(null) String(undefined) String([1,2,3]) String({ msg: 'Hi'}) String(Symbol('id'))

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

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

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

"A" + " " + "text" 1 + "2"

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

"A".concat("B") "A".concat(" ", "text") "1".concat(2)

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(' ');

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

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

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

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

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

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

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

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

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

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

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

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

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

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

const quote = "Winter is coming"; const part1 = quote.substr(0, 6); const part2 = quote.substr(10, 6);

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

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

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

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

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

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

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

const quote = "You know nothing,Jon Snow"; const commaIndex = quote.indexOf(","); const part = quote.substring(commaIndex + 1);

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

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

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

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

`Wisdom  and  Strength`

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

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

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

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

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

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

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

const word = 'Hi
			

延伸 · 阅读

精彩推荐
  • js教程详解如何愉快的在微信小程序中使用SVG图标

    详解如何愉快的在微信小程序中使用SVG图标

    这篇文章主要介绍了详解如何愉快的在微信小程序中使用SVG图标,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要...

    O_o3462022-02-13
  • js教程js仿淘宝放大镜效果

    js仿淘宝放大镜效果

    这篇文章主要为大家详细介绍了js仿淘宝放大镜效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    屈小康11272021-12-21
  • js教程JavaScript Dom实现轮播图原理和实例

    JavaScript Dom实现轮播图原理和实例

    这篇文章主要为大家详细介绍了JavaScript Dom实现轮播图原理和实例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    ALonelyLemon3782022-01-21
  • js教程js实现碰撞检测

    js实现碰撞检测

    这篇文章主要为大家详细介绍了js实现碰撞检测,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    搬砖大法8212022-01-11
  • js教程原生JavaScript实现进度条

    原生JavaScript实现进度条

    这篇文章主要为大家详细介绍了原生JavaScript实现进度条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    weixin_441349725892022-01-21
  • js教程使用Javascript开发sliding-nav带滑动条效果的导航插件

    使用Javascript开发sliding-nav带滑动条效果的导航插件

    这篇文章主要介绍了使用Javascript开发sliding-nav带滑动条效果的导航插件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴...

    dosboy9122022-02-21
  • js教程基于javascript实现移动端轮播图效果

    基于javascript实现移动端轮播图效果

    这篇文章主要为大家详细介绍了基于javascript实现移动端轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    A.香辣鸡腿堡9062021-12-15
  • js教程在JavaScript中查找字符串中最长单词的三种方法(推荐)

    在JavaScript中查找字符串中最长单词的三种方法(推荐)

    这篇文章主要介绍了在JavaScript中查找字符串中最长单词的三种方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋...

    Hunter网络安全7352022-01-04