文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么在JavaScript字符串的字符之间添加空格

2023-07-05 18:32

关注

这篇文章主要讲解了“怎么在JavaScript字符串的字符之间添加空格”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么在JavaScript字符串的字符之间添加空格”吧!

1.String split() 和 Split join() 方法

要在字符串的字符之间添加空格,请对字符串调用 split() 方法以获取字符数组,然后对该数组调用 join() 方法以使用空格分隔符连接字符。

例如:

function addSpace(str) {  return str.split('').join(' ');}const str1 = 'coffee';const str2 = '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() 方法将数组中的每个字符串与分隔符组合在一起。 它返回一个包含串联数组元素的新字符串。

const arr = ['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() 会在生成的连接中用空格分隔字符。

在某些情况下,字符串已经在某些字符之间包含空格。 在这种情况下,我们的方法会在字符之间添加更多的空格。

function addSpace(str) {  return str.split('').join(' ');}// These strings have spaces between some charactersconst str1 = 'co  ffee';const str2 = '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 charactersconst str1 = 'co  ffee';const str2 = 'bana  na';// The space characters are separate elements of the// array from split()console.log(str1.split(''));console.log(str2.split(''));

如果我们想避免字符的多重间距,我们可以在 split() 和 join() 之间插入对 filter() 方法的调用。

function addSpace(str) {  return str    .split('')    .filter((item) => item.trim())    .join(' ');}// The strings have spaces between some charactersconst str1 = 'co  ffee';const str2 = '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 循环在字符串的字符之间添加一个空格。

function addSpace(str) {  // Create a variable to store the eventual result  let result = '';  for (const char of str) {    // On each iteration, add the character and a space    // to the variable    result += char + ' ';  }  // Remove the space from the last character  return result.trimEnd();}const str1 = 'coffee';const str2 = 'banana';console.log(addSpace(str1)); // c o f f e econsole.log(addSpace(str2)); // b a n a n a

要处理前面讨论的情况,其中字符串在某些字符之间有空格,请在每次迭代的字符上调用 trim(),并添加一个 if 检查以确保它是真实的,然后再将它和空格添加到累积结果中:

function addSpace(str) {  // Create a variable to store the eventual result  let result = '';  for (const char of str) {    // 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 truthy    if (char.trim()) {      result += char + ' ';    }  }  // Remove the space from the last character  return result.trimEnd();}const str1 = 'co  ffee';const str2 = 'bana  na';console.log(addSpace(str1)); // c o f f e econsole.log(addSpace(str2)); // b a n a n a

感谢各位的阅读,以上就是“怎么在JavaScript字符串的字符之间添加空格”的内容了,经过本文的学习后,相信大家对怎么在JavaScript字符串的字符之间添加空格这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯