七爪源碼：如何在 JavaScript 中的字符串字符之間添加空格

解如何在 JavaScript 中輕松地在字符串的字符之間添加空格。

在本文中，我們將學(xué)習(xí)如何在 JavaScript 中輕松地在字符串的字符之間包含空格。

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

要在字符串的字符之間添加空格，請(qǐng)?jiān)谧址险{(diào)用 split() 方法以獲取字符數(shù)組，然后在數(shù)組上調(diào)用 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() 方法使用指定的分隔符將字符串拆分為子字符串?dāng)?shù)組。

const str1 = 'coffee,milk,tea';
const str2 = 'sun-moon-star';console.log(str1.split(',')); // [ 'coffee', 'milk', 'tea' ]
console.log(str2.split('-')); // [ 'sun', 'moon', 'star' ]

通過(guò)使用空字符串 ('') 作為分隔符，我們將所有字符串字符拆分為單獨(dú)的數(shù)組元素。

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() 方法將數(shù)組中的每個(gè)字符串與分隔符組合在一起。它返回一個(gè)包含連接數(shù)組元素的新字符串。

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() 會(huì)在結(jié)果串聯(lián)中用空格分隔字符。

在某些情況下，字符串已經(jīng)在某些字符之間包含空格。在這種情況下，我們的方法會(huì)在字符之間添加更多空格。

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

這是因?yàn)榭崭?(' ') 也是一個(gè)字符，就像一個(gè)字母，調(diào)用 split() 會(huì)使其成為數(shù)組中的一個(gè)單獨(dú)元素，該元素將與其他空格組合。

// 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(''));

如果我們想避免字符的多個(gè)間距，我們可以在 split() 和 join() 之間插入對(duì) filter() 方法的調(diào)用。

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() 方法返回一個(gè)新數(shù)組，該數(shù)組僅包含原始數(shù)組中的元素，傳遞給 filter() 的測(cè)試回調(diào)函數(shù)為其返回真值。對(duì)空格 (' ') 調(diào)用 trim() 會(huì)產(chǎn)生一個(gè)空字符串 ('')，這在 JavaScript 中不是真值。因此，從 filter() 返回的結(jié)果數(shù)組中排除了空格。

小費(fèi)

在 JavaScript 中，只有六個(gè)假值：false、null、undefined、0、''（空字符串）和 NaN。其他所有值都是真實(shí)的。

2. for...of 循環(huán)

對(duì)于更命令式的方法，我們可以使用 JavaScript for...of 循環(huán)在字符串的字符之間添加一個(gè)空格。

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

為了處理前面討論的場(chǎng)景，其中字符串在某些字符之間有空格，請(qǐng)?jiān)诿看蔚淖址险{(diào)用 trim()，并添加一個(gè) if 檢查以確保它是真實(shí)的，然后將它和空格添加到累積結(jié)果中：

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

關(guān)注七爪網(wǎng)，獲取更多APP/小程序/網(wǎng)站源碼資源！

欲善其事必先利其器，好的工具能夠提高工作效率。現(xiàn)在網(wǎng)上有很多實(shí)用的小工具，可以幫助你解決工作中的小問(wèn)題。下面就一一分享給大家。

1、漢字拼音在線轉(zhuǎn)換

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

網(wǎng)站支持文字轉(zhuǎn)成拼音大小寫，首字母大寫、句首大寫、標(biāo)注聲調(diào)等等。對(duì)于不熟悉拼音，常用五筆來(lái)打字的人來(lái)說(shuō)，轉(zhuǎn)換出正確的拼音很讓人頭痛，這個(gè)在線網(wǎng)站幫你解決。也能解決普通話不標(biāo)準(zhǔn)的一些家長(zhǎng)的困惑，在輔導(dǎo)孩子寫語(yǔ)文作業(yè)的時(shí)候，不知道拼音怎么標(biāo)注聲調(diào)。

2、在線英文字母大小寫轉(zhuǎn)換

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

網(wǎng)站支持字母全大寫、全小寫、首字母大寫、首字母大寫、空格轉(zhuǎn)下劃線等等，都是很實(shí)用的編輯功能，網(wǎng)站還有很多實(shí)用的功能，需要的可以自行解鎖。

3、二維碼圖片轉(zhuǎn)矢量

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

做設(shè)計(jì)的時(shí)候會(huì)遇到把二維碼轉(zhuǎn)換成矢量的時(shí)候，如果用PS或者AI轉(zhuǎn)出來(lái)的都不是很好，對(duì)于原始文件像素不高的很難解決，這個(gè)網(wǎng)站轉(zhuǎn)換出來(lái)的就很好，可以直接使用。但是面對(duì)特殊的圓形二維碼或者其他的識(shí)別度都行，網(wǎng)站只能轉(zhuǎn)出方形的二維碼。

4、在線書法字轉(zhuǎn)換

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

這是一個(gè)很好的在線書法字轉(zhuǎn)換網(wǎng)站，你可以選擇你喜歡的字進(jìn)行組合。網(wǎng)站提供158,592 幅書法作品中出現(xiàn)的字，可以存svg, png, pdf格式的文件，適用Ai、Ps等軟件。

5、人民幣大寫在線轉(zhuǎn)換

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

這個(gè)網(wǎng)站主要是人民幣大寫的轉(zhuǎn)換、計(jì)算機(jī)顏色在線查詢工具，我主要用在財(cái)務(wù)報(bào)銷的時(shí)候，填寫報(bào)銷單需要用到人民幣的大寫。

6、在線修改照片

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

網(wǎng)站可以在線修改圖片像素及尺寸、裁剪、壓縮文件大小，對(duì)于一些從事文案工作的人來(lái)說(shuō)是個(gè)好幫手，可以解決一些問(wèn)題，不用打開(kāi)專業(yè)的軟件去操作，效率低。

這次就分享這些實(shí)用的工具網(wǎng)站給大家，歡迎在評(píng)論區(qū)留言分享你的實(shí)用工具，點(diǎn)贊和評(píng)論是對(duì)我最大的鼓勵(lì)支持，謝謝大家。

hrome 126 于近期發(fā)布了穩(wěn)定版本，其中一個(gè)比較有意思的更新是給 HTML 帶來(lái)一個(gè)新的元素：<permission> ，它將從這個(gè)版本開(kāi)始試用，并且正在努力走向標(biāo)準(zhǔn)化。

今天我們一起來(lái)看下這個(gè) <permission> 元素的用法。

Web 權(quán)限提示的問(wèn)題

當(dāng) Web 應(yīng)用程序需要訪問(wèn)瀏覽器的高級(jí)功能時(shí)，需要向用戶主動(dòng)請(qǐng)求許可。例如，當(dāng)百度地圖使用 Geolocation API 獲取用戶的地理位置時(shí)，瀏覽器會(huì)提示用戶申請(qǐng)權(quán)限，這是權(quán)限規(guī)范中定義明確的概念。

申請(qǐng)權(quán)限的觸發(fā)方式一般分為兩類，被動(dòng)隱式觸發(fā)，或者主動(dòng)顯示觸發(fā)：

例如，Geolocation API 是一個(gè)強(qiáng)大的 API，它的使用依賴于首次使用時(shí)隱式詢問(wèn)的方法。例如，當(dāng)程序調(diào)用 navigator.geolocation.getCurrentPosition() 方法時(shí)，權(quán)限提示框會(huì)在第一次調(diào)用時(shí)自動(dòng)彈出，還有另外一個(gè)例子是 navigator.mediaDevices.getUserMedia()。

一些其他的 API，如 Notification API 或 Device Orientation API，通常有一種顯式的方式通過(guò)靜態(tài)方法來(lái)請(qǐng)求權(quán)限，如 Notification.requestPermission() 或 DeviceMotionEvent.requestPermission()。

網(wǎng)站可以在加載時(shí)立即調(diào)用諸如 navigator.mediaDevices.getUserMedia() 或 Notification.requestPermission() 等方法。這會(huì)導(dǎo)致在用戶還沒(méi)與網(wǎng)站進(jìn)行交互時(shí)就彈出權(quán)限提示。這就是明顯的權(quán)限濫用行為，并且影響到兩種方式，既包括首次使用時(shí)的隱含詢問(wèn)，也包括提前明確請(qǐng)求。

權(quán)限濫用導(dǎo)致瀏覽器廠商要求有像點(diǎn)擊按鈕或按下按鍵這樣的用戶操作，然后才會(huì)顯示權(quán)限提示。這種方法的問(wèn)題在于，瀏覽器很難確定某個(gè)特定的用戶操作是否應(yīng)該導(dǎo)致顯示權(quán)限提示。也許用戶只是因?yàn)轫?yè)面加載時(shí)間太長(zhǎng)而在頁(yè)面上隨意某個(gè)地方隨便點(diǎn)擊，有些網(wǎng)站也變得非常擅長(zhǎng)誘騙用戶點(diǎn)擊內(nèi)容來(lái)觸發(fā)提示。

另一個(gè)問(wèn)題是權(quán)限提示框通常顯示的方式：在網(wǎng)站的 “死亡線” 之上（特別是在大屏幕上），也就是說(shuō)，在應(yīng)用程序能夠繪制到的瀏覽器窗口區(qū)域之外。用戶在剛剛點(diǎn)擊了窗口底部的一個(gè)按鈕后，可能會(huì)錯(cuò)過(guò)瀏覽器窗口頂部的提示，這種情況還是挺常見(jiàn)的。當(dāng)瀏覽器有應(yīng)對(duì)權(quán)限濫用的緩解措施時(shí)，這個(gè)問(wèn)題往往會(huì)更加嚴(yán)重。

另外，用戶一旦做出了拒絕某個(gè)權(quán)限的操作，之后想要改變就不太容易了。他們得找到特定的地方，比如那個(gè)網(wǎng)站信息下拉菜單，然后去進(jìn)行重置或調(diào)整權(quán)限的操作，而且還得重新加載頁(yè)面才行。網(wǎng)站也沒(méi)辦法提供很方便的途徑讓用戶快速改變權(quán)限狀態(tài)，還得詳細(xì)地告訴用戶怎么去找到地方改變?cè)O(shè)置。

如果某個(gè)權(quán)限是非常重要的，比如視頻會(huì)議軟件要用麥克風(fēng)權(quán)限，那像谷歌會(huì)議這類的軟件就會(huì)彈出很顯眼的對(duì)話框來(lái)告訴用戶怎么去把之前阻止的權(quán)限給開(kāi)通。

<permission>元素

為了解決上面的這些問(wèn)題，<permission> 元素誕生了。這個(gè)元素允許開(kāi)發(fā)者以聲明方式請(qǐng)求使用權(quán)限，如下例所示：

<permission type="camera" />

“type” 屬性代表你正在請(qǐng)求的權(quán)限列表（如果有多個(gè)可以以空格分割）。目前，允許的值是 'camera'，'microphone' 以及 'camera microphone'。默認(rèn)情況下，這個(gè)元素呈現(xiàn)出來(lái)的樣子類似于具有最簡(jiǎn)用戶代理樣式的按鈕。

對(duì)于某些允許附加參數(shù)的權(quán)限，type-ext 屬性接受以空格分隔的鍵值對(duì)，例如 precise:true 地理位置權(quán)限。

當(dāng)用戶與 <permission> 元素交互時(shí)，他們可以循環(huán)經(jīng)歷各個(gè)階段：

如果他們之前不允許某項(xiàng)功能，他們可以在每次訪問(wèn)時(shí)允許該功能，或者在當(dāng)前訪問(wèn)時(shí)允許該功能。

如果他們之前允許該功能，他們可以繼續(xù)允許，或者停止允許。

如果他們之前不允許某項(xiàng)功能，他們可以繼續(xù)不允許它，或者這次允許它。

<permission> 元素的文本會(huì)根據(jù)狀態(tài)自動(dòng)更新。例如，如果已授予使用某項(xiàng)功能的權(quán)限，則文本會(huì)更改為表示允許使用該功能。如果需要先授予權(quán)限，則文本會(huì)更改為邀請(qǐng)用戶使用該功能。將之前的屏幕截圖與以下屏幕截圖進(jìn)行比較，以查看這兩種狀態(tài)。

<permission> 元素可以與 Permissions API 一起使用。有許多事件可供監(jiān)聽(tīng)：

onpromptdismiss：當(dāng)元素觸發(fā)的權(quán)限提示被用戶關(guān)閉（例如，單擊關(guān)閉按鈕或單擊提示之外）時(shí)，會(huì)觸發(fā)此事件。
onpromptaction：當(dāng)元素觸發(fā)的權(quán)限提示已被用戶對(duì)提示本身采取某種操作解決時(shí)，觸發(fā)此事件。這并不一定意味著權(quán)限狀態(tài)已經(jīng)改變，用戶可能已經(jīng)采取了維持現(xiàn)狀的操作（例如繼續(xù)允許權(quán)限）。
onvalidationstatuschange：當(dāng)元素從 "valid" 切換到 "invalid" 時(shí)觸發(fā)此事件，例如當(dāng)元素被其他超文本標(biāo)記語(yǔ)言內(nèi)容部分遮擋時(shí)，會(huì)認(rèn)為是 "invalid"。

我們可以直接在 HTML 代碼中內(nèi)聯(lián)注冊(cè)這些事件的事件監(jiān)聽(tīng)器（<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

在線咨詢

上一篇：路由器測(cè)速達(dá)不到運(yùn)營(yíng)商提供的實(shí)際帶寬？試試這樣做
下一篇：HTML5學(xué)習(xí)筆記三:HTML5語(yǔ)法規(guī)則

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

七爪源碼：如何在 JavaScript 中的字符串字符之間添加空格

Web 權(quán)限提示的問(wèn)題

<permission>元素

最后

您的項(xiàng)目需求