解如何在 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 e
console.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 d
console.log(arr.join('-')); // a-b-c-d
console.log(arr.join('/')); // a/b/c/d

因此，将空格字符传递给 join() 会在结果串联中用空格分隔字符。

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

function addSpace(str) {
  return str.split('').join(' ');
}// These strings have spaces between some characters
const str1 = 'co  ffee';
const str2 = 'bana  na';console.log(addSpace(str1)); // c o     f f e e
console.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() 方法的调用。

function addSpace(str) {
  return str
    .split('')
    .filter((item) => item.trim())
    .join(' ');
}// The strings have spaces between some characters
const str1 = 'co  ffee';
const str2 = 'bana  na';console.log(addSpace(str1)); // c o f f e e
console.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 e
console.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 e
console.log(addSpace(str2)); // b a n a n a

关注七爪网，获取更多APP/小程序/网站源码资源！

欲善其事必先利其器，好的工具能够提高工作效率。现在网上有很多实用的小工具，可以帮助你解决工作中的小问题。下面就一一分享给大家。

1、汉字拼音在线转换

（https://www.qqxiuzi.cn/zh/pinyin/）

网站支持文字转成拼音大小写，首字母大写、句首大写、标注声调等等。对于不熟悉拼音，常用五笔来打字的人来说，转换出正确的拼音很让人头痛，这个在线网站帮你解决。也能解决普通话不标准的一些家长的困惑，在辅导孩子写语文作业的时候，不知道拼音怎么标注声调。

2、在线英文字母大小写转换

（https://www.iamwawa.cn/daxiaoxie.html）

网站支持字母全大写、全小写、首字母大写、首字母大写、空格转下划线等等，都是很实用的编辑功能，网站还有很多实用的功能，需要的可以自行解锁。

3、二维码图片转矢量

（http://www.zhangqu.org/?page_id=359）

做设计的时候会遇到把二维码转换成矢量的时候，如果用PS或者AI转出来的都不是很好，对于原始文件像素不高的很难解决，这个网站转换出来的就很好，可以直接使用。但是面对特殊的圆形二维码或者其他的识别度都行，网站只能转出方形的二维码。

4、在线书法字转换

（http://www.ziticq.com/Shufa）

这是一个很好的在线书法字转换网站，你可以选择你喜欢的字进行组合。网站提供158,592 幅书法作品中出现的字，可以存svg, png, pdf格式的文件，适用Ai、Ps等软件。

5、人民币大写在线转换

（https://www.917118.com/tool/rmb.html）

这个网站主要是人民币大写的转换、计算机颜色在线查询工具，我主要用在财务报销的时候，填写报销单需要用到人民币的大写。

6、在线修改照片

（https://www.gaitubao.com/）

网站可以在线修改图片像素及尺寸、裁剪、压缩文件大小，对于一些从事文案工作的人来说是个好帮手，可以解决一些问题，不用打开专业的软件去操作，效率低。

这次就分享这些实用的工具网站给大家，欢迎在评论区留言分享你的实用工具，点赞和评论是对我最大的鼓励支持，谢谢大家。

hrome 126 于近期发布了稳定版本，其中一个比较有意思的更新是给 HTML 带来一个新的元素：<permission> ，它将从这个版本开始试用，并且正在努力走向标准化。

今天我们一起来看下这个 <permission> 元素的用法。

Web 权限提示的问题

当 Web 应用程序需要访问浏览器的高级功能时，需要向用户主动请求许可。例如，当百度地图使用 Geolocation API 获取用户的地理位置时，浏览器会提示用户申请权限，这是权限规范中定义明确的概念。

申请权限的触发方式一般分为两类，被动隐式触发，或者主动显示触发：

例如，Geolocation API 是一个强大的 API，它的使用依赖于首次使用时隐式询问的方法。例如，当程序调用 navigator.geolocation.getCurrentPosition() 方法时，权限提示框会在第一次调用时自动弹出，还有另外一个例子是 navigator.mediaDevices.getUserMedia()。

一些其他的 API，如 Notification API 或 Device Orientation API，通常有一种显式的方式通过静态方法来请求权限，如 Notification.requestPermission() 或 DeviceMotionEvent.requestPermission()。

网站可以在加载时立即调用诸如 navigator.mediaDevices.getUserMedia() 或 Notification.requestPermission() 等方法。这会导致在用户还没与网站进行交互时就弹出权限提示。这就是明显的权限滥用行为，并且影响到两种方式，既包括首次使用时的隐含询问，也包括提前明确请求。

权限滥用导致浏览器厂商要求有像点击按钮或按下按键这样的用户操作，然后才会显示权限提示。这种方法的问题在于，浏览器很难确定某个特定的用户操作是否应该导致显示权限提示。也许用户只是因为页面加载时间太长而在页面上随意某个地方随便点击，有些网站也变得非常擅长诱骗用户点击内容来触发提示。

另一个问题是权限提示框通常显示的方式：在网站的 “死亡线” 之上（特别是在大屏幕上），也就是说，在应用程序能够绘制到的浏览器窗口区域之外。用户在刚刚点击了窗口底部的一个按钮后，可能会错过浏览器窗口顶部的提示，这种情况还是挺常见的。当浏览器有应对权限滥用的缓解措施时，这个问题往往会更加严重。

另外，用户一旦做出了拒绝某个权限的操作，之后想要改变就不太容易了。他们得找到特定的地方，比如那个网站信息下拉菜单，然后去进行重置或调整权限的操作，而且还得重新加载页面才行。网站也没办法提供很方便的途径让用户快速改变权限状态，还得详细地告诉用户怎么去找到地方改变设置。

如果某个权限是非常重要的，比如视频会议软件要用麦克风权限，那像谷歌会议这类的软件就会弹出很显眼的对话框来告诉用户怎么去把之前阻止的权限给开通。

<permission>元素

为了解决上面的这些问题，<permission> 元素诞生了。这个元素允许开发者以声明方式请求使用权限，如下例所示：

<permission type="camera" />

“type” 属性代表你正在请求的权限列表（如果有多个可以以空格分割）。目前，允许的值是 'camera'，'microphone' 以及 'camera microphone'。默认情况下，这个元素呈现出来的样子类似于具有最简用户代理样式的按钮。

对于某些允许附加参数的权限，type-ext 属性接受以空格分隔的键值对，例如 precise:true 地理位置权限。

当用户与 <permission> 元素交互时，他们可以循环经历各个阶段：

如果他们之前不允许某项功能，他们可以在每次访问时允许该功能，或者在当前访问时允许该功能。

如果他们之前允许该功能，他们可以继续允许，或者停止允许。

如果他们之前不允许某项功能，他们可以继续不允许它，或者这次允许它。

<permission> 元素的文本会根据状态自动更新。例如，如果已授予使用某项功能的权限，则文本会更改为表示允许使用该功能。如果需要先授予权限，则文本会更改为邀请用户使用该功能。将之前的屏幕截图与以下屏幕截图进行比较，以查看这两种状态。

<permission> 元素可以与 Permissions API 一起使用。有许多事件可供监听：

• onpromptdismiss：当元素触发的权限提示被用户关闭（例如，单击关闭按钮或单击提示之外）时，会触发此事件。
• onpromptaction：当元素触发的权限提示已被用户对提示本身采取某种操作解决时，触发此事件。这并不一定意味着权限状态已经改变，用户可能已经采取了维持现状的操作（例如继续允许权限）。
• onvalidationstatuschange：当元素从 "valid" 切换到 "invalid" 时触发此事件，例如当元素被其他超文本标记语言内容部分遮挡时，会认为是 "invalid"。

我们可以直接在 HTML 代码中内联注册这些事件的事件监听器（<permission type="…" onpromptdismiss="alert('The prompt was dismissed');" />），或者在 <permission> 元素上使用 addEventListener()：

<permission type="camera" />
<script>
  const permission = document.querySelector('permission');
  permission.addEventListener('promptdismiss', showCameraWarning);

  function showCameraWarning() {
    // Show warning that the app isn't fully usable
    // unless the camera permission is granted.
  }

  const permissionStatus = await navigator.permissions.query({name: "camera"});
  permissionStatus.addEventListener('change', () => {
    // Run the check when the status changes.
    if (permissionStatus.state === "granted") {
      useCamera();
    }
    // Run the initial check.
    if (permissionStatus.state === "granted") {
      useCamera();
    }
  });
</script>

最后

参考：https://developer.chrome.com/blog/permission-element-origin-trial