几乎所有JavaScript字符串函数的有用示例

最新推荐文章于 2024-09-14 08:25:16 发布

weixin_26750481

最新推荐文章于 2024-09-14 08:25:16 发布

阅读量85

点赞数

文章标签： python javascript ViewUI

原文链接：https://medium.com/javascript-in-plain-english/useful-examples-of-almost-all-javascript-string-functions-4131f3f990f2

版权

If you are even remotely familiar with JavaScript there is a high probability that you have used a JavaScript String function before. It could have been concat()or trim() but it’s unlikely that you have used all or even most of them.

如果您甚至对JavaScript不太熟悉，那么很有可能以前使用过JavaScript String函数。可能是concat()或trim()但您不可能全部或全部使用它们。

Let’s take a look at a few examples that might make your life easier when working with JavaScript Strings.

让我们看一些使用JavaScript字符串可能会使您的生活更轻松的示例。

The motivation for this article is a feature that I really enjoyed in Jira / BitBucket that would automatically concatenate the Jira ticket number and description as the branch name when creating a new git branch.

本文的动机是我在Jira / BitBucket中真正喜欢的一项功能，当创建新的git分支时，该功能会自动将Jira票证编号和描述作为分支名称。

Sadly this feature does not exist in Azure DevOps. Let’s see if we can’t recreate it though with some JavaScript!

遗憾的是，Azure DevOps中不存在此功能。让我们看看是否可以通过一些JavaScript重新创建它！

Let’s start with a simple string that will contain our ticket number and description.

让我们从一个简单的字符串开始，该字符串将包含我们的票号和描述。

const userFeature = ` 12345: Create shipping component with 'Use this address' and 'Add new address...' buttons `;

1.)trim() (1.) trim())

So the first thing you may notice in the userFeature string is a space before the number ` 12345 and after the last word buttons ` .

因此，您可能会在userFeature字符串中注意到的第一件事是数字` 12345之前和最后一个单词buttons `之后的空格。

In our instance we will want to remove these two spaces which thankfully is exactly what the trim() operation will accomplish for us.

在我们的实例中，我们将要删除这两个空格，幸运的是，正是trim()操作将为我们完成。

trimStart() — this could be used if you only want to trim the beginning of the string taking ` 12345 to`12345

trimStart() —如果您只想修剪字符串的开头，将` 12345到`12345

trimEnd() — this could be used if you only want to trim the end of the string taking buttons ` to buttons`

trimEnd() -如果只想将buttons `到buttons `修剪字符串的末尾，则可以使用该buttons`

const userFeature = ` 12345: Create shipping component with 'Use this address' and 'Add new address...' buttons `;const trimmedUserFeature = userFeature.trim();console.log(`Result: ${trimmedUserFeature}`);
//Result: 12345: Create shipping component with 'Use this address' and 'Add new address...' buttons

2.)replace() (2.) replace())

When creating a git branch most special characters and spaces will not be valid to use. This is a good use for the replace() function.

创建git分支时，大多数特殊字符和空格将无效。这是replace()函数的一个好用法。

The first replace() will replace all empty spaces with a -.

第一个replace()将用-替换所有空白。

The second replace() will replace anything in the string that is not a character A-Z, a-z, 0–9, or a - with an empty string.

第二个replace()会将字符串中不是字符AZ，az，0–9或-替换为空字符串。

Note: You can use a string for replace() however I advise against this as it will only replace the first occurrence. Regex will replace all occurrences.

注意： 您可以将字符串用于 replace() 但是我建议您不要这样做，因为它将仅替换第 一个 匹配项。 正则表达式将替换 所有 出现的事件。

const userFeature = ` 12345: Create shipping component with 'Use this address' and 'Add new address...' buttons `;const formattedUserFeature = userFeature
    .trim()
    .replace(/ /g, '-')
    .replace(/[^A-Za-z0-9-]+/g, '');console.log(`Result: ${formattedUserFeature}`);
//Result: 12345-Create-shipping-component-with-Use-this-address-and-Add-new-address-buttons

3.)toLowerCase()和toUpperCase() (3.) toLowerCase() & toUpperCase())

Continuing on with perfecting our string we could leverage toLowerCase() or toUpperCase() to format our string to be all lower case or all capital letters.

继续完善我们的字符串，我们可以利用toLowerCase()或toUpperCase()将我们的字符串格式化为小写或所有大写字母。

I’ll use toLowerCase() to follow the naming convention for git branches.

我将使用toLowerCase()遵循git分支的命名约定。

const userFeature = ` 12345: Create shipping component with 'Use this address' and 'Add new address...' buttons `;const formattedUserFeature = userFeature
    .trim()
    .replace(/ /g, '-')
    .replace(/[^A-Za-z0-9-]+/g, '')
    .toLowerCase();console.log(`Result: ${formattedUserFeature}`);
//Result: 12345-create-shipping-component-with-use-this-address-and-add-new-address-buttons

4.)concat() (4.) concat())

What if you want to use this same idea to create a file instead of a git branch? We can do that with concat() by just adding the appropriate file extension as a parameter.

如果要使用相同的想法创建文件而不是git分支怎么办？我们可以通过添加适当的文件扩展名作为参数来使用concat()做到这一点。

Note: concat() has negative performance implications so it is best to add the .js with a string template or a simple assignment operator (+)

注意： concat() 会对性能产生负面影响，因此最好 使用字符串模板或简单的赋值运算符( + ) 添加 .js 。

const userFeature = ` 12345: Create shipping component with 'Use this address' and 'Add new address...' buttons `;const formattedUserFeature = userFeature
    .trim()
    .replace(/ /g, '-')
    .replace(/[^A-Za-z0-9-]+/g, '')
    .toLowerCase()
    .concat('.js');console.log(`Result: ${formattedUserFeature}`);
//Result: 12345-create-shipping-component-with-use-this-address-and-add-new-address-buttons.js

5.)slice() (5.) slice())

So now that we have done the modifications mentioned about with the trim(), replace(), toLowerCase() and concat() to make the formattedUserFeature string let’s use that string for the following operations.

现在，我们已经完成了对trim() ， replace() ， toLowerCase()和concat()以使formattedUserFeature字符串能够用于以下操作。

Say that you’ve used the methods above to create multiple git branches (or files) and you want to get all ticket numbers. Assuming the ticket numbers are all five digits you can add the beginIndex of 0 and an endIndex of 5.

假设您已经使用上述方法创建了多个git分支(或文件)，并且想要获取所有票证编号。假设票证号码都是五位数字，则可以添加beginIndex为0和endIndex为5 。

const formattedUserFeature = `12345-create-shipping-component-with-use-this-address-and-add-new-address-buttons.js`;console.log(`Result: ${formattedUserFeature.slice(0, 5)}`);
//Result: 12345

6.)startsWith()/ EndsWith() (6.) startsWith() / endsWith())

Both startsWith() and endsWith() will search the beginning or ending of a string returning a boolean.

startsWith()和endsWith()都将搜索返回布尔值的字符串的开头或结尾。

This could be useful if you are trying to determine all .js or .ts files. You could also use this to determine all files or branches that start with 123 etc.

如果您要确定所有.js或.ts文件，这可能会很有用。您还可以使用它来确定以123等开头的所有文件或分支。

const formattedUserFeature = `12345-create-shipping-component-with-use-this-address-and-add-new-address-buttons.js`;console.log(`Result: ${formattedUserFeature.startsWith('10')}`);
//Result: falseconsole.log(`Result: ${formattedUserFeature.endsWith('.js')}`);
//Result: true

7.)includes() (7.) includes())

If you want to determine if a word (a string) exists in another string you can use includes().

如果要确定另一个字符串中是否存在一个单词( string )，可以使用includes() 。

In our example we might want to see all files or branches that pertain to shipping so we can pass that as a parameter to includes() which will return a boolean value.

在我们的示例中，我们可能希望查看所有与shipping有关的文件或分支，因此我们可以将其作为参数传递给includes() ，该参数将返回布尔值。

const formattedUserFeature = `12345-create-shipping-component-with-use-this-address-and-add-new-address-buttons.js`;console.log(`Result: ${formattedUserFeature.includes('shipping')}`);
//Result: true

附加信息 (Additional Information)

If you enjoyed this article and want to execute this code and stay up to date with future articles I post on Medium please check out this GitHub repository.

如果您喜欢这篇文章并希望执行此代码，并及时了解我在Medium上发布的未来文章，请查看此GitHub存储库。

To learn even more details I would suggest checking out Mozilla Developer Network JavaScript Strings.

要了解更多详细信息，我建议您查看Mozilla开发人员网络JavaScript字符串。

You can also simply execute this code locally or in Chrome DevTools leveraging the GitHub gist below.

您还可以简单地在本地或在Chrome DevTools中利用以下GitHub要点执行此代码。