复习前端:JavaScript 字符串操作方法

简介: 笔记

20.png字符串是每种编程语言的基本组成部分,而 JavaScript 具有许多强大的内置函数,可以让开发人员轻松处理字符串。


includes


includes 方法确定子字符串是否包含在较大的字符串中并返回 true 或者 false。常用于搜索/解析的字符串是否匹配。

const arrayAuthors = ["DevPoint", "DevelopPoint"];
const author = "DevPoint";
console.log([].includes(author)); // false
console.log(arrayAuthors.includes(author)); // true
console.log([1, 2].includes(author)); // false

toUpperCase


toUpperCase 方法返回一个全部为大写字母的字符串。

const title = "Develop Point";
console.log(title.toUpperCase()); // DEVELOP POINT

toLocaleLowerCase


toLocaleLowerCase 方法返回一个全部为小写字母的字符串。

const title = "Develop Point";
console.log(title.toLocaleLowerCase()); // develop point

字符串遍历


字符串中 length 属性将返回字符串的长度。通过 .length 属性来对字符串进行遍历。

const string = "DevPoint";
for (let i = 0; i < string.length; i++) {
    console.log(string[i]);
}

将可以看到依次输出 Ddvpoint


search


使用 search 方法在另一个字符串中搜索一个字符串,它将返回该字符串的索引,这个方法和 indexOf 方法的效果类似。

console.log("DevPoint".search("Point")); // 3
console.log("DevPoint Develop Point".search("e")); // 1
console.log("DevPoint".search("e")); // 1

indexOf


indexOf 方法用于查找字符串的第一个索引,要查找的字符或者字符串多次重复,方法只会返回第一次出现的索引值。

const getStringIndex = (str, searchStr) => str.indexOf(searchStr);
console.log(getStringIndex("DevPoint", "v")); // 2
console.log(getStringIndex("DevPoint Develop Point", "P")); // 3
console.log(getStringIndex("DevPoint Develop Point", "Dev")); // 0
console.log(getStringIndex("DevPoint", "1")); // -1

slice


slice 方法截取字符串的一部分并在新字符串中返回截取的部分。slice,方法接受两个参数:开始索引和结束索引。结果字符串是这两个索引之间的切片字符串,但末尾索引处的字符除外。slice 通常用于字符串的截取。

console.log("DevPoint".slice(0, 3)); // Dev
console.log("DevPoint".slice(3, 7)); // Poin,不包含索引为 7 的字母 t

如果没有提供最后一个索引,slice 将继续查找直到字符串结束:

console.log("DevPoint".slice(3)); // Point

还可以使用负参数从字符串末尾开始对字符串进行截取,为负数话就是从右边开始数起。

console.log("DevPoint".slice(-5)); // Point
console.log("DevPoint".slice(-5, -1)); // Poin

replace


replace 方法将字符串中的特定值替换为另一个值。

console.log("DevPoint".replace("Dev", "Develop ")); // Develop Point

concat


concat() 方法连接两个或多个字符串:

const str1 = "Develop";
const str2 = "Point";
const arrStr = [str1, " ", str2];
console.log(str1.concat(" ", str2)); // Develop Point
console.log("".concat(...arrStr)); // Develop Point

trim


JavaScript 中的 trim() 会删除字符串两边的空格:

const str1 = " Develop ";
console.log(str1.trim()); // Develop

split


split() 方法使用指定的分隔符字符串将一个 String 对象分割成子字符串数组,以一个指定的分割字串来决定每个拆分的位置。

const str = "The split() method takes";
const arrayWorlds = str.split(" ");
console.log(arrayWorlds); // [ 'The', 'split()', 'method', 'takes' ]

lastIndexOf


lastIndexOf 方法返回指定文本在字符串中最后一次出现的索引,与 indexOf 的结果相反(查找的内容存在):

const getStringLastIndex = (str, searchStr) => str.lastIndexOf(searchStr);
console.log(getStringLastIndex("DevPoint", "v")); // 2
console.log(getStringLastIndex("DevPoint Develop Point", "P")); // 17
console.log(getStringLastIndex("DevPoint Develop Point", "Dev")); // 9
console.log(getStringLastIndex("DevPoint", "1")); // -1

charAt


charAt 方法返回字符串中指定索引或位置处的字符。将前面字符串遍历使用 charAt 方法来实现,代码如下:

const string = "DevPoint";
for (let i = 0; i < string.length; i++) {
    console.log(string.charAt(i));
}

charCodeAt


charCodeAt 方法返回 unicode 字符串中指定索引处的字符。返回 0 到 65535 之间的整数,表示给定索引处的 UTF-16 代码单元。

const title = "Develop Point;";
console.log(title.charCodeAt(0)); // 68
console.log(title.toLocaleLowerCase().charCodeAt(0)); // 100

repeat


repeat 构造并返回一个新字符串,该字符串包含被连接在一起的指定数量的字符串的副本。

const title = "Develop Point;";
console.log(title.repeat(2)); // Develop Point;Develop Point;

match


match 方法检索返回一个字符串匹配正则表达式的结果。下面的示例在字符串中搜索所有大写字母。它返回与正则表达式匹配的值的字符串数组。

const title = "Develop Point;";
const regex = /[A-Z]/g;
console.log(title.match(regex)); // [ 'D', 'P' ]

matchAll


matchAll 方法返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。它不会创建一个包含所有匹配项的单个数组,而是创建一个迭代器。 和 match 相比,主要的区别是返回值的区别,而参数有细微的区别(参数 RegExp 必须是设置了全局模式 g 的形式,否则会抛出异常 TypeError)。

const title = "Develop Point;";
const regex = /[A-Z]/g;
const result = title.matchAll(regex);
console.log(result); // Object [RegExp String Iterator] {}
console.log([...result]);
// [
//   [ 'D', index: 0, input: 'Develop Point;', groups: undefined ],
//   [ 'P', index: 8, input: 'Develop Point;', groups: undefined ]
// ]


总结


JavaScript 中的字符串方法非常有用,了解它们也很重要,作为前端开发人员,很多时候会发现自己在使用它们。

相关文章
|
28天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
25天前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
27天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
40 5
|
25天前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
63 1
|
1月前
|
JavaScript 前端开发 数据处理
模板字符串和普通字符串在浏览器和 Node.js 中的性能表现是否一致?
综上所述,模板字符串和普通字符串在浏览器和 Node.js 中的性能表现既有相似之处,也有不同之处。在实际应用中,需要根据具体的场景和性能需求来选择使用哪种字符串处理方式,以达到最佳的性能和开发效率。
|
29天前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
35 4
|
1月前
|
监控 前端开发 jenkins
Jenkins 在前端项目持续部署中的应用,包括其原理、流程以及具体的实现方法
本文深入探讨了Jenkins在前端项目持续部署中的应用,涵盖其基本原理、流程及具体实现方法。首先介绍了Jenkins的基本概念及其在自动化任务中的作用,随后详细解析了从前端代码提交到生产环境部署的全过程,包括构建、测试、部署等关键步骤。最后,强调了持续部署中的代码质量控制、环境一致性、监控预警及安全管理等注意事项,旨在帮助开发者高效、安全地实施持续部署。
59 5
|
28天前
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
23 2
|
1月前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
111 1
下一篇
DataWorks