介绍
短语 vanilla JavaScript 通常被用来涵盖没有框架或库的 JavaScript 写作,虽然许多现代问题可以通过框架和库来解决,但了解 JavaScript 内在的内容以及如何以及何时依靠它们将帮助您成为一个更强大的开发人员。
你的目标是计算英语词汇()的发生次数 - 首都和底层 - 包含在字符串中。
「JavaScript」包含 3 個聲音,「DigitalOcean」包含 6 個聲音,「Rhythms」包含 0 個聲音。
在本文中,您将使用迭代循环构建一个解决方案,并使用常规表达式构建第二个解决方案。
前提条件
如果您想跟随这篇文章,您将需要:
- 具有网络开发者控制台或沙盒环境的现代网页浏览器,具有REPL执行.
- 与https://andsky.com/tech/tutorials/for-loops-for-of-loops-and-for-in-loops-in-javascript、Strings和Arrays的异同将是有益的。
- 对[正 表示(https://andsky.com/tech/tutorials/js-regular-expressions-for-regular-people)有些熟悉可能是有益的,但不需要。 .
此示例使用 for...of 和 includes() 不受旧浏览器支持。
使用一个迭代循环
在迭代方法中,您将循环通过传递的字母串的每个字母,然后检查是否有任何字母匹配任何的音符. 如果字母匹配已知的可能值的音符,您将增加一个计数变量.一旦循环完成,您可以参考这个变量,它将显示音符的数量。
花一会儿思考如何打破这个任务的要求和步骤。
现在,要么在 Web 浏览器中使用 Web 开发者控制台,要么在其他 REPL 实现程序中,让我们为此问题构建解决方案。
首先,让我们定义你所知道的:
1const vowels = ["a", "e", "i", "o", "u"]
这个代码声明一个常数 - 音符 - 包含五个英语音符的数组。
然后,让我们创建一个函数,通过一个文本值:
1const vowels = ["a", "e", "i", "o", "u"]
2
3function countVowelsIterative(text) {
4
5}
在这个函数中,你将一个计数变量初始化为0。
1const vowels = ["a", "e", "i", "o", "u"]
2
3function countVowelsIterative(text) {
4 let counter = 0
5
6 console.log(`The text contains ${counter} vowel(s)`)
7
8 return counter
9}
此代码会将消息登录到控制台,并返回``计数变量的值。
然后,通过链路,你可以使用一个 for...of链路:
1const vowels = ["a", "e", "i", "o", "u"]
2
3function countVowelsIterative(text) {
4 let counter = 0
5
6 for (let letter of text.toLowerCase()) {
7
8 }
9
10 console.log(`The text contains ${counter} vowel(s)`)
11
12 return counter
13}
一个 for...of 循环重复在 iterable 对象 - 字符串,序列,地图,集,等等。
此代码还将)`并避免也需要定义资本化语音。
然后,您可以使用一个如果语句来检查一个字母是否匹配任何一个语音:
1const vowels = ["a", "e", "i", "o", "u"]
2
3function countVowelsIterative(text) {
4 let counter = 0
5
6 for (let letter of text.toLowerCase()) {
7 if (vowels.includes(letter)) {
8
9 }
10 }
11
12 console.log(`The text contains ${counter} vowel(s)`)
13
14 return counter
15}
此代码使用)方法来确定语音的数组是否包含所选的字母,按情况返回真或假。
最后,如果条件为真,则可以增加反对变量:
1const vowels = ["a", "e", "i", "o", "u"]
2
3function countVowelsIterative(text) {
4 let counter = 0
5
6 for (let letter of text.toLowerCase()) {
7 if (vowels.includes(letter)) {
8 counter++
9 }
10 }
11
12 console.log(`The text contains ${counter} vowel(s)`)
13
14 return counter
15}
考虑用户可能提交的文本的可能值,并确保您的函数以适当的方式处理每个值。
一个空的链条:
1countVowelsIterative('')
您希望返回的值为0:
1[secondary_label Output]
2The text contains 0 vowel(s)
一个没有音符的弦:
1countVowelsIterative('Rhythms')
您希望返回的值为0:
1[secondary_label Output]
2The text contains 0 vowel(s)
一个或多个语音的字符串:
1countVowelsIterative('DigitalOcean')
您预期应该返回一个等于字符串中的语音发生次数的数值:
1[secondary_label Output]
2The text contains 6 vowel(s)
您成功开发了一种迭代循环解决方案,用于计算文本字符串中的英语语音发生次数。
使用常规表达式
普通表达式 (regex)帮助您在字符串中找到模式或字符组合。
对于这个特定场景,一个常规的表达式很适合计算文本字符串中英语语音的发生次数。
常规表达式在许多编程语言中可用,用于解决需要搜索、匹配和过滤的许多问题,熟悉常规表达式将为您的开发人员技能添加一个更强大的工具。
花一会儿思考如何打破这个任务的要求和步骤。
现在,要么在 Web 浏览器中使用 Web 开发者控制台,要么在其他 REPL 实现程序中,让我们为此问题构建解决方案。
让我们创建一个函数,通过一个文本值:
1function countVowelsRegex(text) {
2
3}
您可以使用含有语音的数组代替具有模式 [aeiou] 的常规表达式:
1/[aeiou]/gi
对于简单的模式,常规表达式通常被定义为一对切片(/)。 方块([和 ])用于指定一个字符类别。
关闭后,使用字母g和i。正常表达式将在条件满足后停止使用。使用g进行全球搜索将继续执行额外的搜索。使用i进行案例不敏感的搜索,您可以避免还需要定义资本化语音。
然后,将一个正常的表达式应用到文本:
1function countVowelsRegex(text) {
2 let matchingInstances = text.match(/[aeiou]/gi);
3}
此代码使用 match() 方法。
如果有一个匹配,将返回该匹配的所有实例的正常表达式;如果没有匹配,则返回一个null值。
检查是否存在匹配Instances值,并处理这两种情况:
1function countVowelsRegex(text) {
2 let matchingInstances = text.match(/[aeiou]/gi);
3
4 if (matchingInstances) {
5 console.log(`The text contains ${matchingInstances.length} vowel(s)`)
6
7 return matchingInstances.length
8 } else {
9 return 0
10 }
11}
如果),您会登录一个格式化消息,显示与数组的长度相同的语音数目。
如果匹配Instances评估到一个错误的值,则返回0,因为这意味着没有找到匹配。
考虑用户可能提交的文本的可能值,并确保您的函数以适当的方式处理每个值。
一个或多个语音的字符串:
1countVowelsRegex('DigitalOcean')
您预期应该返回一个等于字符串中的语音发生次数的数值:
1[secondary_label Output]
2The text contains 6 vowel(s)
您成功开发了一种常规表达式解决方案,用于计算文本字符串中英语语音的发生次数。
结论
在本文中,您成功地实施了两个解决方案,在JavaScript中计算文本字符串中的语音数。
迭代循环方法使用 Strings, Arrays, for...of, toLowerCase(), if, includes() 和增量。
常规表达方法使用 Strings、Arrays、 match()、 if...else 和 length()。
选择您的项目的解决方案需要考虑可读性和性能优化等因素。
通过探索 Strings 和 Arrays 可用的其他方法来继续学习。