面试官：Javscript字符串的常用方法有哪些？

你的名字 2022-10-28 00:49 192阅读 0赞

![format_png][]

## 一、操作方法 ##

我们也可将字符串常用的操作方法归纳为增、删、改、查

### 增 ###

这里增的意思并不是说直接增添内容，而是创建字符串的一个副本，再进行操作

除了常用`+`以及`${}`进行字符串拼接之外，还可通过`concat`

#### concat ####

用于将一个或多个字符串拼接成一个新字符串

let stringValue = "hello ";
    let result = stringValue.concat("world");
    console.log(result); // "hello world"
    console.log(stringValue); // "hello"

### 删 ###

这里的删的意思并不是说删除原字符串的内容，而是创建字符串的一个副本，再进行操作

常见的有：

*  slice()
 *  substr()
 *  substring()

这三个方法都返回调用它们的字符串的一个子字符串，而且都接收一或两个参数。

let stringValue = "hello world";
    console.log(stringValue.slice(3)); // "lo world"
    console.log(stringValue.substring(3)); // "lo world"
    console.log(stringValue.substr(3)); // "lo world"
    console.log(stringValue.slice(3, 7)); // "lo w"
    console.log(stringValue.substring(3,7)); // "lo w"
    console.log(stringValue.substr(3, 7)); // "lo worl"

### 改 ###

这里改的意思也不是改变原字符串，而是创建字符串的一个副本，再进行操作

常见的有：

*  trim()、trimLeft()、trimRight()
 *  repeat()
 *  padStart()、padEnd()
 *  toLowerCase()、 toUpperCase()

#### trim()、trimLeft()、trimRight() ####

删除前、后或前后所有空格符，再返回新的字符串

let stringValue = " hello world ";
    let trimmedStringValue = stringValue.trim();
    console.log(stringValue); // " hello world "
    console.log(trimmedStringValue); // "hello world"

#### repeat() ####

接收一个整数参数，表示要将字符串复制多少次，然后返回拼接所有副本后的结果

let stringValue = "na ";
    let copyResult = stringValue.repeat(2) // na na

#### padEnd() ####

复制字符串，如果小于指定长度，则在相应一边填充字符，直至满足长度条件

let stringValue = "foo";
    console.log(stringValue.padStart(6)); // " foo"
    console.log(stringValue.padStart(9, ".")); // "......foo"

### toLowerCase()、 toUpperCase() ###

大小写转化

let stringValue = "hello world";
    console.log(stringValue.toUpperCase()); // "HELLO WORLD"
    console.log(stringValue.toLowerCase()); // "hello world"

### 查 ###

除了通过索引的方式获取字符串的值，还可通过：

*  chatAt()
 *  indexOf()
 *  startWith()
 *  includes()

#### charAt() ####

返回给定索引位置的字符，由传给方法的整数参数指定

let message = "abcde";
    console.log(message.charAt(2)); // "c"

#### indexOf() ####

从字符串开头去搜索传入的字符串，并返回位置（如果没找到，则返回 -1 ）

let stringValue = "hello world";
    console.log(stringValue.indexOf("o")); // 4

#### startWith()、includes() ####

从字符串中搜索传入的字符串，并返回一个表示是否包含的布尔值

let message = "foobarbaz";
    console.log(message.startsWith("foo")); // true
    console.log(message.startsWith("bar")); // false
    console.log(message.includes("bar")); // true
    console.log(message.includes("qux")); // false

## 二、转换方法 ##

### split ###

把字符串按照指定的分割符，拆分成数组中的每一项

let str = "12+23+34"
    let arr = str.split("+") // [12,23,34]

## 三、模板匹配方法 ##

针对正则表达式，字符串设计了几个方法：

*  match()
 *  search()
 *  replace()

### match() ###

接收一个参数，可以是一个正则表达式字符串，也可以是一个`RegExp`对象，返回数组

let text = "cat, bat, sat, fat";
    let pattern = /.at/;
    let matches = text.match(pattern);
    console.log(matches[0]); // "cat"

### search() ###

接收一个参数，可以是一个正则表达式字符串，也可以是一个`RegExp`对象，找到则返回匹配索引，否则返回 -1

let text = "cat, bat, sat, fat";
    let pos = text.search(/at/);
    console.log(pos); // 1

### replace() ###

接收两个参数，第一个参数为匹配的内容，第二个参数为替换的元素（可用函数）

let text = "cat, bat, sat, fat";
    let result = text.replace("at", "ond");
    console.log(result); // "cond, bat, sat, fat"

面试官VUE3番外篇已完结：6/6

[面试官：Vue3.0的设计目标是什么？做了哪些优化?][Vue3.0]

[面试官：Vue3.0 性能提升主要是通过哪几方面体现的？][Vue3.0 1]

[面试官：Vue3.0里为什么要用 Proxy API 替代 defineProperty API ？][Vue3.0_ Proxy API _ defineProperty API]

[面试官：Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同？][Vue3.0 _ Composition Api _ Vue2.x _ Options Api]

[面试官：说说Vue 3.0中Treeshaking特性？举例说明一下？][Vue 3.0_Treeshaking]

[面试官：用Vue3.0 写过组件吗？如果想实现一个 Modal你会怎么设计？][Vue3.0 _ Modal]

面试官JavaScript系列正在更新：3/33

[面试官：说说JavaScript中的数据类型？区别？文末彩蛋！][JavaScript]

[面试官：Javscript数组的常用方法有哪些？][Javscript]

篇副有限，扫下方二维码查看往期

![format_png 1][]

[format_png]: /images/20221024/6462e6d8208744dda0f12d93e49ae8dd.png
[Vue3.0]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c534cb674c22b3c8d8c00edebfaadfc2c4b053cdc72aada1f85510a7ba2fa6eb17afe931&idx=2&mid=2247485282&scene=21&sn=65fe59726c446b16d9aa1deff9141285#wechat_redirect
[Vue3.0 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c525cb674c3362db1ba684f9365902177988186009b323cc9398f0c260e58b09d8aaf0b0&idx=1&mid=2247485299&scene=21&sn=92d9cedf388788977179c6dcdb4acf05#wechat_redirect
[Vue3.0_ Proxy API _ defineProperty API]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c5f9cb674cef4003894137ead6830b27dd7c22614cb56bdafcc9fb82605f8332e28f61ad&idx=2&mid=2247485359&scene=21&sn=1f3a8633cf6a4e66bc2fd729076e565a#wechat_redirect
[Vue3.0 _ Composition Api _ Vue2.x _ Options Api]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c596cb674c80d27d1b4c4961e7376f292296a6835fade27d2c2d6767111ae62a85d7fb39&idx=1&mid=2247485376&scene=21&sn=59271ed8381ddaa99c9d83faaf284bd2#wechat_redirect
[Vue 3.0_Treeshaking]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c599cb674c8f04d4b9b28277d4489ec0afb86c39fb98bafe75a5fe86d66d1ada663e6e7b&idx=1&mid=2247485391&scene=21&sn=40c79896193a0b867f9b701d336bc608#wechat_redirect
[Vue3.0 _ Modal]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c5bbcb674cad75a5558b74555c446dab4d8b446a0ac3ff84dc8a03cd3e4bf44bee9ea8f7&idx=2&mid=2247485421&scene=21&sn=09ad6eafb68435c4b4cb92906f61b661#wechat_redirect
[JavaScript]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10ca16cb67430076377b942d7a9d2284815d199d07d7ad7b12182f9e6966e814801b23303e&idx=1&mid=2247485504&scene=21&sn=66fd8176826fcbdb54866fcac6cfa7e9#wechat_redirect
[Javscript]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10ca09cb67431fad3fc7291cfc34b8a9bf9db27e20ff4a09373eac8ca399f4b5a8410b9f8e&idx=1&mid=2247485535&scene=21&sn=ba7fe0490dd306e7aff90b8b8dd45b2c#wechat_redirect
[format_png 1]: /images/20221024/5d54138e16bc499fab35031ee3061efd.png