chst365's blog chst365's blog
首页
  • Git
  • 网络
  • 操作系统
  • 浏览器
  • webpack
  • JavaScript
  • TypeScript
  • 性能
  • 工程化
  • React
  • 编程题
  • React技术揭秘
  • 算法
  • Node
  • 编码解码
  • NodeJS系列
  • Linux系列
  • JavaScript系列
  • HTTP系列
  • GIT系列
  • ES6系列
  • 设计模式系列
  • CSS系列
  • 小程序系列
  • 数据结构与算法系列
  • React系列
  • Vue3系列
  • Vue系列
  • TypeScript系列
  • Webpack系列
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

chst365

DIV工程师
首页
  • Git
  • 网络
  • 操作系统
  • 浏览器
  • webpack
  • JavaScript
  • TypeScript
  • 性能
  • 工程化
  • React
  • 编程题
  • React技术揭秘
  • 算法
  • Node
  • 编码解码
  • NodeJS系列
  • Linux系列
  • JavaScript系列
  • HTTP系列
  • GIT系列
  • ES6系列
  • 设计模式系列
  • CSS系列
  • 小程序系列
  • 数据结构与算法系列
  • React系列
  • Vue3系列
  • Vue系列
  • TypeScript系列
  • Webpack系列
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • NodeJS系列

  • Linux系列

  • JavaScript系列

    • 举例说明你对尾递归的理解,有哪些应用场景
    • bind、call、apply 区别?如何实现一个bind?
    • 说说你对函数式编程的理解?优缺点?
    • 说说你对BOM的理解,常见的BOM对象你了解哪些?
    • 说说new操作符具体干了什么?
    • 说说 Javascript 数字精度丢失的问题,如何解决?
    • 说说你对事件循环的理解
    • 什么是防抖和节流?有什么区别?如何实现?
    • 说说你对正则表达式的理解?应用场景?
    • 谈谈 JavaScript 中的类型转换机制
    • 说说你对作用域链的理解
    • DOM常见的操作有哪些?
    • 说说你对闭包的理解?闭包使用场景
    • JavaScript原型,原型链 ? 有什么特点?
    • ajax原理是什么?如何实现?
    • Javascript如何实现继承?
    • 大文件上传如何做断点续传?
    • 说说你了解的js数据结构?
    • 解释下什么是事件代理?应用场景?
    • == 和 ===区别,分别在什么情况使用
    • 说说JavaScript中的事件模型
    • JavaScript字符串的常用方法有哪些?
      • 一、操作方法
        • 增
        • 删
        • 改
        • toLowerCase()、 toUpperCase()
        • 查
      • 二、转换方法
        • split
      • 三、模板匹配方法
        • match()
        • search()
        • replace()
    • 数组的常用方法有哪些?
    • 如何判断一个元素是否在可视区域中?
    • 深拷贝浅拷贝的区别?如何实现一个深拷贝?
    • typeof 与 instanceof 区别
    • Javascript本地存储的方式有哪些?区别及应用场景?
    • 说说JavaScript中的数据类型?存储上的差别?
    • 说说 JavaScript 中内存泄漏的几种情况?
    • 什么是单点登录?如何实现?
    • JavaScript中执行上下文和执行栈是什么?
    • 如何实现上拉加载,下拉刷新?
    • Javascript中如何实现函数缓存?函数缓存有哪些应用场景?
    • web常见的攻击方式有哪些?如何防御?
    • 谈谈this对象的理解
  • HTTP系列

  • GIT系列

  • ES6系列

  • 设计模式系列

  • CSS系列

  • 小程序系列

  • 数据结构与算法系列

  • React系列

  • Vue3系列

  • Vue系列

  • TypeScript系列

  • Webpack系列

  • 面试官
  • JavaScript系列
chst365
2023-06-28
目录

JavaScript字符串的常用方法有哪些?

# 面试官:JavaScript字符串的常用方法有哪些?

# 一、操作方法

我们也可将字符串常用的操作方法归纳为增、删、改、查,需要知道字符串的特点是一旦创建了,就不可变

# 增

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

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

# concat

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

let stringValue = "hello ";
let result = stringValue.concat("world");
console.log(result); // "hello world"
console.log(stringValue); // "hello"
1
2
3
4

# 删

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

常见的有:

  • 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"
1
2
3
4
5
6
7

# 改

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

常见的有:

  • 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"
1
2
3
4

# repeat()

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

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

# padEnd()

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

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

# toLowerCase()、 toUpperCase()

大小写转化

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

# 查

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

  • chatAt()

  • indexOf()

  • startWith()

  • includes()

# charAt()

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

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

# indexOf()

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

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

# 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
1
2
3
4
5

# 二、转换方法

# split

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

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

# 三、模板匹配方法

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

  • match()
  • search()
  • replace()

# match()

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

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

# search()

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

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

# replace()

接收两个参数,第一个参数为匹配的内容,第二个参数为替换的元素(可用函数)

let text = "cat, bat, sat, fat";
let result = text.replace("at", "ond");
console.log(result); // "cond, bat, sat, fat"
1
2
3
#面试官
上次更新: 2025/04/11, 17:57:53
说说JavaScript中的事件模型
数组的常用方法有哪些?

← 说说JavaScript中的事件模型 数组的常用方法有哪些?→

最近更新
01
面试官
03-27
02
this&指针&作用域&闭包
03-27
03
前端
03-27
更多文章>
Theme by Vdoing | Copyright © 2019-2025 chst365 | 豫ICP备17031889号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式