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

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

服务器之家 - 编程语言 - JavaScript - js教程 - 每个开发人员都应该知道的 JavaScript 字符串操作技术

每个开发人员都应该知道的 JavaScript 字符串操作技术

2022-10-13 17:37七爪网 js教程

在 JavaScript 中,字符串是不可变的,可以帮助我们存储包含字符、数字和 Unicode 的文本。 此外,JavaScript 包含许多用于以各种方式创建和操作字符串的内置函数。

在 JavaScript 中,字符串是不可变的,可以帮助我们存储包含字符、数字和 Unicode 的文本。 此外,JavaScript 包含许多用于以各种方式创建和操作字符串的内置函数。

每个开发人员都应该知道的 JavaScript 字符串操作技术

在本文中,我将讨论每个开发人员都应该知道的 JavaScript 字符串操作技术。

1.将字符串拆分成字符数组

作为开发人员,我们面临许多需要将字符串拆分为字符数组的情况。 例如,它是软件工程师面试中被问到最多的问题之一。 在 JavaScript 中,有很多方法可以将字符串拆分为字符数组:

split()

split() 方法将一个字符串分成两个或多个子字符串的有序列表并返回它,具体取决于提供的模式、分隔符或分隔符。

let quote = 'I am Nipuni'; // Split string using the space character  let array1 = quote.split(' '); console.log(array1); // ["I", "am", "Nipuni"]  // Split string using an empty string (on each character) let array2 = quote.split(''); console.log(array2); // ["I", " ", "a", "m", " ", "N", "i", "p", "u", "n", "i"]

from()

Array 类的 from() 方法是 split() 方法的主要竞争对手。 它允许我们从数据源创建一个数组。 我们还可以使用它从可迭代的字符串中创建一个数组。

let name = "Nipuni Arunodi"; // String to array of chracters  let nameChars = Array.from(name); console.log(nameChar); // ["N","i","p","u","n","i"," ","A","r","u","n","o","d","i"]

扩展运算符 (…)

扩展运算符是另一个 JavaScript 功能,可帮助我们从字符串创建数组。

let name = "Nipuni Arunodi"; // Spread out string into an array  let nameChar = [...name]; console.log(nameChar); // ["N","i","p","u","n","i"," ","A","r","u","n","o","d","i"]

2.检查字符串中的特定序列

与拆分类似,有很多方法可以检查 JavaScript 字符串中的特定序列。 includes() 方法、indexOf() 或正则表达式可用于此类目的。 但是,includes() 是确定字符串是否包含一个字母或一系列字母的最常用方法。 它是专门为此目的而创建的。

const text = "Hi, My name is Nipuni" console.log(text.includes("Nipuni")); // true console.log(text.includes("Arunodi")); // false

3.检查字符串是否以特定序列开头或结尾

includes() 检查整个字符串中的特定序列。 如果您想确定一个字符串是以特定子字符串开头还是结尾,有两种专门的方法。

string 方法 startsWith() 确定字符串是否以特定子字符串开头。 如果字符串以指定的子字符串开头,它将返回 true。 否则,它返回 false。

const text = "Hi, My name is Nipuni" console.log(text.startsWith("Hi")); // true

endsWith() 方法允许我们确定一个字符串是否以指定的字符串结尾。

const text = "Hi, My name is Nipuni" console.log(text.endsWith("Hi")); // false

4. 在多个分隔符上拆分一个字符串

最初,我提到 split() 函数可用于将字符串拆分为数组。 同样,您可以将正则表达式传递给 split() 函数以同时在多个运算符上拆分字符串。

// Split on comma (,) and semicolon (;). const list = "Car,Bus;Train" const vehicles= list.split(/[,;]/); console.log(fruits); // ["Car", "Bus", "Train"]

5. 反转字符串中的字符

这是入门级开发人员面试的另一个常规问题。 有许多方法可以使用 JavaScript 反转字符串。 例如,我们可以将 split() 方法与 reverse() 和 join() 方法结合起来。

使用这种方法,首先,您需要使用 split() 将字符串拆分为一个数组。 接下来,您使用 reverse() 反转数组,然后最后使用 join() 函数再次加入它。 这是在 JavaScript 中反转字符串的最简单方法。

const word = "Nipuni"; const reversedWord = [...word].reverse().join(""); console.log(reversedWord); // "inupiN"

6.多次复制一个字符串

repeat() 是 JavaScript 中的一个字符串方法,它允许我们重复一个字符串指定的次数。 由于 repeat() 方法是一个字符串对象方法,它必须与 String 类的特定实例一起使用。

// Concatenate "0" 10 times. const zeroString= "0".repeat(10); console.log(zeroString); // "0000000000"

7. 将字符串填充到特定长度

您可能希望您的字符串有时具有指定的长度。 如果你的字符串太短,你会想要填补空白,直到它达到所需的长度。 以前,人们经常为此使用库。 相反,您现在可以使用 padStart() 和 padEnd() 方法在开头或结尾填充字符串。

// Add 0 to the beginning until the string has a length of 10. const string = "001".padStart(10, "0"); console.log(string); // "0000000001" // Add * to the end until the string has a length of 10. const string = "99".padEnd(10, "*"); console.log(string ); // "99********"

8. 计算字符串中的字符

您可以轻松地使用 string.length 方法来获取字符串的长度。 它将返回字符串中的字符数。

const word = "Nipuni"; console.log(word.length); // 6

9. 将字符串中的字母转换为大写或小写

您可以使用 toUpperCase() 和 toLowerCase() 方法将字符串中的字符分别转换为大写或小写。 例如,如果您需要将第一个字母大写,您可以使用以下方法:

// Method 1 - To Uppercase let name = "nipuni"; name = name[0].toUpperCase() + name.substr(1); console.log(name); // "Nipuni" // Method 1 - To Lowercase name = name[0].toLowerCase() + name.substr(1); console.log(name); // "nipuni" // Method 2 - To Uppercase let name = "nipuni"; const characters = [...name]; characters[0] = characters[0].toUpperCase(); name = characters.join(""); console.log(name); // "Nipuni" // Method 2 - To Lowercase const characters = [...name]; characters[0] = characters[0].toLowerCase(); name = characters.join(""); console.log(name); // "Nipuni"

10.替换所有出现的字符串

有几种方法可以替换所有出现的字符串。 replace() 方法或带有全局标志的正则表达式是开发人员使用的一些常用方法。

但是,JavaScript 在 2021 年引入了一种名为 replaceAll() 的新方法,可以一次替换所有出现的内容。 但是,目前并非所有浏览器或最新版本的 Node.js 都可以使用这种新方法。

const text = "I like Cars. Cars have 4 wheels" console.log(text.replace(/Cars/g, "Vans")); // "I like Vans. Vans have 4 wheels" console.log(text.replaceAll("Cars", "Vans")); // "I like Vans. Vans have 4 wheels"

结论

在几乎每一种编程语言中,字符串都是最基本的数据类型之一。 开发人员每天都需要在他们的项目中处理各种字符串操作。

本文讨论了每个开发人员都应该知道的 JavaScript 中一些最常见的字符串操作技术。 我希望这篇文章能帮助你提高你的知识。 感谢您的阅读。

原文地址:https://www.toutiao.com/article/7153636493418873382/

延伸 · 阅读

精彩推荐
  • js教程详解CocosCreator系统事件是怎么产生及触发的

    详解CocosCreator系统事件是怎么产生及触发的

    这篇文章主要介绍了CocosCreator系统事件是怎么产生及触发的,虽然内容不少,但是只要一点点抽丝剥茧,具体分析其内容,就会豁然开朗...

    CZhiSheng3672022-03-03
  • js教程CocosCreator怎样使用cc.follow进行镜头跟随

    CocosCreator怎样使用cc.follow进行镜头跟随

    这篇文章主要介绍了CocosCreator怎样使用cc.follow进行镜头跟随,想要学习follow的同学,一定要看一下...

    gamedaybyday8672022-03-05
  • js教程JavaScript canvas实现带有阴影的图形和文字

    JavaScript canvas实现带有阴影的图形和文字

    这篇文章主要为大家详细介绍了JavaScript canvas实现带有阴影的图形和文字,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参...

    believehxl5202022-02-17
  • js教程js+html+css实现手动轮播和自动轮播

    js+html+css实现手动轮播和自动轮播

    这篇文章主要为大家详细介绍了js+html+css实现手动轮播和自动轮播效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考...

    南柯Seven9472021-12-22
  • js教程微信小程序自定义modal弹窗组件的方法详解

    微信小程序自定义modal弹窗组件的方法详解

    这篇文章主要给大家介绍了关于微信小程序自定义modal弹窗组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学...

    遇见小美好12382021-12-15
  • js教程js实现点击弹窗弹出登录框

    js实现点击弹窗弹出登录框

    这篇文章主要为大家详细介绍了js实现点击弹窗弹出登录框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    &小小白&6632022-03-07
  • js教程用javascript制作qq注册动态页面

    用javascript制作qq注册动态页面

    这篇文章主要介绍了用javascript制作qq注册动态页面,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参...

    花狗Fdog9652022-02-28
  • js教程js实现表格拖动选项

    js实现表格拖动选项

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

    爱笑萌娃3772022-03-06