了解如何在 JavaScript 中轻松地在字符串的字符之间添加空格。
在本文中,我们将学习如何在 JavaScript 中轻松地在字符串的字符之间包含空格。
1. String split() 和 Split join() 方法
要在字符串的字符之间添加空格,请在字符串上调用 split() 方法以获取字符数组,然后在数组上调用 join() 方法以使用空格分隔符连接字符。
例如:
functionaddSpace(str) { returnstr.split(”).join(‘ ‘); }conststr1 = ‘coffee’; conststr2 = ‘banana’;console.log(addSpace(str1)); // c o f f e econsole.log(addSpace(str2)); // b a n a n a
String split() 方法使用指定的分隔符将字符串拆分为子字符串数组。
const str1 = ‘coffee,milk,tea’; const str2 = ‘sun-moon-star’;console.log(str1.split(‘,’)); //[ ‘coffee’, ‘milk’, ‘tea’] console.log(str2.split(‘-‘)); //[ ‘sun’, ‘moon’, ‘star’]
通过使用空字符串 (”) 作为分隔符,我们将所有字符串字符拆分为单独的数组元素。
const str1 = ‘coffee’; const str2 = ‘banana’;// Passing an empty string(”) to the split method// [ ‘c’, ‘o’, ‘f’, ‘f’, ‘e’, ‘e’] console.log(str1.split(”));// [ ‘b’, ‘a’, ‘n’, ‘a’, ‘n’, ‘a’] console.log(str2.split(”));
String join() 方法将数组中的每个字符串与分隔符组合在一起。 它返回一个包含连接数组元素的新字符串。
constarr = [‘a’, ‘b’, ‘c’, ‘d’];console.log(arr.join(‘ ‘)); // a b c dconsole.log(arr.join(‘-‘)); // a-b-c-dconsole.log(arr.join(‘/’)); // a/b/c/d
因此,将空格字符传递给 join() 会在结果串联中用空格分隔字符。
在某些情况下,字符串已经在某些字符之间包含空格。 在这种情况下,我们的方法会在字符之间添加更多空格。
functionaddSpace(str) { returnstr.split(”).join(‘ ‘); }// These strings have spaces between some charactersconststr1 = ‘co ffee’; conststr2 = ‘bana na’;console.log(addSpace(str1)); // c o f f e econsole.log(addSpace(str2)); // b a n a n a
这是因为空格 (‘ ‘) 也是一个字符,就像一个字母,调用 split() 会使其成为数组中的一个单独元素,该元素将与其他空格组合。
// These strings have spaces between some characters const str1 = ‘co ffee’; const str2 = ‘bana na’;// The space characters are separate elements of the // array from split() /** * [ ‘c’, ‘o’, ‘ ‘, ‘ ‘, ‘f’, ‘f’, ‘e’, ‘e’] */ console.log(str1.split(”));/** * [ ‘b’, ‘a’, ‘n’, ‘a’, ‘ ‘, ‘ ‘, ‘n’, ‘a’] */ console.log(str2.split(”));
如果我们想避免字符的多个间距,我们可以在 split() 和 join() 之间插入对 filter() 方法的调用。
functionaddSpace(str) { returnstr .split(”) .filter((item) =>item.trim()) .join(‘ ‘); }// The strings have spaces between some charactersconststr1 = ‘co ffee’; conststr2 = ‘bana na’;console.log(addSpace(str1)); // c o f f e econsole.log(addSpace(str2)); // b a n a n a
Array filter() 方法返回一个新数组,该数组仅包含原始数组中的元素,传递给 filter() 的测试回调函数为其返回真值。 对空格 (‘ ‘) 调用 trim() 会产生一个空字符串 (”),这在 JavaScript 中不是真值。 因此,从 filter() 返回的结果数组中排除了空格。
小费
在 JavaScript 中,只有六个假值:false、null、undefined、0、”(空字符串)和 NaN。 其他所有值都是真实的。
2. for…of 循环
对于更命令式的方法,我们可以使用 JavaScript for…of 循环在字符串的字符之间添加一个空格。
functionaddSpace(str) { // Create a variable to store the eventual resultletresult = ”; for(constchar ofstr) { // On each iteration, add the character and a space// to the variableresult += char + ‘ ‘; } // Remove the space from the last characterreturnresult.trimEnd(); }conststr1 = ‘coffee’; conststr2 = ‘banana’;console.log(addSpace(str1)); // c o f f e econsole.log(addSpace(str2)); // b a n a n a
为了处理前面讨论的场景,其中字符串在某些字符之间有空格,请在每次迭代的字符上调用 trim(),并添加一个 if 检查以确保它是真实的,然后将它和空格添加到累积结果中:
functionaddSpace(str) { // Create a variable to store the eventual resultletresult = ”; for(constchar ofstr) { // On each iteration, add the character and a space// to the variable // If the character is a space, trim it to an empty// string, then only add it if it is truthyif(char.trim()) { result += char + ‘ ‘; } } // Remove the space from the last characterreturnresult.trimEnd(); }conststr1 = ‘co ffee’; conststr2 = ‘bana na’;console.log(addSpace(str1)); // c o f f e econsole.log(addSpace(str2)); // b a n a n a
关注七爪网,获取更多APP/小程序/网站源码资源!