快捷導(dǎo)航

詳解Vue如何將多個空格被合并顯示成一個空格

更新時間：2024年04月02日 08:29:14 作者：HED

這篇文章主要為大家詳細介紹了在Vue中如何將多個空格被合并顯示成一個空格,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

現(xiàn)象

最近在Vue2項目開發(fā)中遇到個奇怪的現(xiàn)象，用戶往數(shù)據(jù)庫存了中間有四個空格的數(shù)據(jù)，數(shù)據(jù)庫存儲正常，接口返回的數(shù)據(jù)也是帶四個空格沒問題，但頁面展示只有一個空格。

原因

在HTML/Vue中，多個連續(xù)的空格會合并為一個空格。

解決方案

1.插值表達式 + 正則

<template>
  <span>{{ space1 }}</span> 
  <span>{{ space2} }</span>
</template>

<script>
 export default {
   data() {
     //正確寫法
     space1: '這是   空格'.replace(/\s/g, '\xa0'),//頁面顯示效果：這是   空格
     //錯誤寫法
     space2: '這是   空格'.replace(/\s/g, '&nbsp;'),//頁面顯示效果：這是&nbsp;&nbsp;&nbsp;空格
   }
 }
</script>

在Vue2中，如果使用插值表達，則需使用\xa0來表示空格，如果直接使用 來表示空格，它不會顯示為空格，而是會被當成字符實體解析。

2.v-html指令 + 正則

<template>
  <span v-html="space1">{{ space1 }}</span> 
  <span v-html="space2">{{ space2} }</span>
</template>

<script>
 export default {
   data() {
     //正確寫法1
     space1: '這是   空格'.replace(/\s/g, '\xa0'),//頁面顯示效果：這是   空格
     //正確寫法2
     space2: '這是   空格'.replace(/\s/g, '&nbsp;'),//頁面顯示效果：這是   空格
   }
 }
</script>

在Vue2中，如果使用v-html指令方式，則用\xa0或 來表示空格都可以正常顯示。

3.v-html指令／插值表達式 + CSS

如果不對空格進行轉(zhuǎn)義，在v-html指令／插值表達式模式下直接給元素添加如下樣式也能實現(xiàn)想要的效果。

<template>
  <span style="white-space:pre;" v-html="'這是   空格'"></span> 
</template>

其中，white-space:pre;是保留所有空白或換行符（回車鍵），可以實現(xiàn)原樣輸出。

番外

在Vue2中，如果在模板標簽中直接使用 作為空格，則在 compile 的過程中會被轉(zhuǎn)換成一個空格。而直接使用\xa0來表示空格，則會被當成字符實體解析。

<template>
  <!-- 頁面顯示效果：這是 空格 -->
  <span>這是&nbsp;&nbsp;&nbsp;空格'</span>
  <!-- 頁面顯示效果：這是\xa0\xa0\xa0 空格 -->
  <span>這是\xa0\xa0\xa0空格'</span>
</template>

HTML提供的幾種空格實體

HTML提供的幾種空格實體（space entity），它們擁有不同的寬度。非斷行空格（）是常規(guī)空格的寬度，可運行于所有主流瀏覽器。其他幾種空格（&ensp; &emsp;   &zwnj;&zwj;）在不同瀏覽器中寬度各異。

 

它叫不換行空格，全稱No-Break Space，它是最常見和我們使用最多的空格，大多數(shù)的人可能只接觸了，它是按下space鍵產(chǎn)生的空格。在HTML中，如果你用空格鍵產(chǎn)生此空格，空格是不會累加的（只算1個）。要使用html實體表示才可累加，該空格占據(jù)寬度受字體影響明顯而強烈。

&ensp;

它叫半角空格，全稱是En Space，en是字體排印學(xué)的計量單位，為em寬度的一半。根據(jù)定義，它等同于字體度的一半（如16px字體中就是8px）。名義上是小寫字母n的寬度。此空格傳承空格家族一貫的特性：透明的，此空格有個相當穩(wěn)健的特性，就是其占據(jù)的寬度正好是1/2個中文寬度，而且基本上不受字體影響。

&emsp;

它叫角空格，全稱是Em Space，em是字體排印學(xué)的計量單位，相當于當前指定的點數(shù)。例如，1 em在16px的字體中就是16px。此空格也傳承空格家族一貫的特性：透明的，此空格也有個相當穩(wěn)健的特性，就是其占據(jù)的寬度正好是1個中文寬度，而且基本上不受字體影響。

 

它叫窄空格，全稱是Thin Space。我們不妨稱之為瘦弱空格，就是該空格長得比較瘦弱，身體單薄，占據(jù)的寬度比較小。它是em之六分之一寬。

&zwnj;

它叫零寬不連字，全稱是Zero Width Non Joiner，簡稱ZWNJ，是一個不打印字符，放在電子文本的兩個字符之間，抑制本來會發(fā)生的連字，而是以這兩個字符原本的字形來繪制。Unicode中的零寬不連字字符映射為U+200C。

&zwj;

它叫零寬連字，全稱是Zero Width Joiner，簡稱ZWJ，是一個不打印字符，放在某些需要復(fù)雜排版語言（如阿拉伯語、印地語）的兩個字符之間，使得這兩個本不會發(fā)生連字的字符產(chǎn)生了連字效果。零寬連字符的Unicode碼位是U+200D。

此外，瀏覽器還會把以下字符當作空白進行解析：空格（ ）、制表位（	）、換行（
）和回車（）還有（　）等等。

Js中的空格

1.String.fromCharCode(32)

2.\xa0：屬于latin（ISO/IEC_8859-1，拉丁字母）中的擴展字符集字符，代表空白符nbsp(non-breaking space)。