快捷導(dǎo)航

JavaScript中常見的數(shù)據(jù)格式化方式詳解

更新時(shí)間：2023年12月12日 11:30:10 作者：一涯

這篇文章主要為大家詳細(xì)介紹了JavaScript中常見的數(shù)據(jù)格式化方式,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以了解一下

前端一直被稱為項(xiàng)目開發(fā)的食物鏈底層，頁面出了問題，樣式不好看，數(shù)據(jù)格式不對(duì)，展示形式不對(duì)等等，第一反應(yīng)被@的大都是前端。最常見的問題就是，接口返回的數(shù)據(jù)格式往往和產(chǎn)品要求的不符合，這時(shí)我們就要按照產(chǎn)品需求文檔和設(shè)計(jì)稿處理成他們需要的樣子。

1.JSON格式數(shù)據(jù)展示

在表單操作中，復(fù)雜的表單字段接口端會(huì)處理成JSON字符串格式。在表格展示中，為了能夠用戶直觀的查看JSON數(shù)據(jù)，我們要處理成格式化后的結(jié)構(gòu)。

例如：

數(shù)據(jù)返回格式如下

response = '{"title": "住址", "dataIndex": 'address',key: 'address'}'

但是當(dāng)字段多的時(shí)候查看特別不方便，需要做如下處理

console.log(JSON.stringify(JSON.parse(reponse)) ; //先將接口相應(yīng)數(shù)據(jù)轉(zhuǎn)為對(duì)象，再序列化。
  // 打印結(jié)果如下
{
    "title": "住址",
    "dataIndex": "address",
    "key": "address"
}

原理：JSON.stringify語法

JSON.stringify(value[, replacer[, space]]) space可選，表示文本添加縮進(jìn)、空格和換行符，如果 space 是一個(gè)數(shù)字，則返回值文本在每個(gè)級(jí)別縮進(jìn)指定數(shù)目的空格。所以根據(jù)space不同，我們可以處理成各種各樣的展示形式。

console.log(JSON.stringify({"title": "住址",dataIndex: 'address',key: 'address'}, null, "---"))
{
---"title": "住址",
---"dataIndex": "address",
---"key": "address"
}

console.log(JSON.stringify({"title": "住址",dataIndex: 'address',key: 'address'}, null, "\t"))
{
	"title": "住址",
	"dataIndex": "address",
	"key": "address"
}

console.log(JSON.stringify({"title": "住址",dataIndex: 'address',key: 'address'}, null, " "))
{
 "title": "住址",
 "dataIndex": "address",
 "key": "address"
}

插一個(gè)題外話，同樣的項(xiàng)目如果不同后端開發(fā)可能對(duì)于同樣的數(shù)據(jù)結(jié)構(gòu)返回不同的數(shù)據(jù)格式，這個(gè)方法也能很好的處理如：

//有些人按照習(xí)慣的方式將樹狀結(jié)構(gòu)的子結(jié)構(gòu)寫成children
{
    a: 1,
    children: [
        {b: 1}
    ]
}
//但是有些人就隨心所欲慣了，非寫成childList
{
    a: 1,
    childList: [
        {b: 1}
    ]
}

我們處理數(shù)據(jù)的時(shí)候得考慮將其處理成統(tǒng)一的格式

JSON.stringify({
    a: 1,
    childList: [
        {b: 1}
    ]
}).replace("childList", "children")

2.使用<pre>標(biāo)簽

開發(fā)中一般textarea類型的表單經(jīng)常返回如下格式數(shù)據(jù)

"此例演示如何使用 pre 標(biāo)簽 \n對(duì)空行和空格\n進(jìn)行控制"

處理該類數(shù)據(jù)，直接在外層套一個(gè)pre標(biāo)簽

  var a = "此例演示如何使用 pre 標(biāo)簽 \n對(duì)空行和 空格\n進(jìn)行控制";
  <pre>{a}</pre>

3. React中使用dangerouslySetInnerHTML

開發(fā)中不乏來自第三方編輯器的數(shù)據(jù)，格式如下：

<p>這是一段文本段落</p>
<br/>
<div>這是另一段</div>

處理該類數(shù)據(jù)，我們使用該屬性

var a = "<p>這是一段文本段落</p>
<br/>
<div>這是另一段</div>"

<div dangerouslySetInnerHTML={{__html: a}}></div>

到此這篇關(guān)于JavaScript中常見的數(shù)據(jù)格式化方式詳解的文章就介紹到這了,更多相關(guān)JavaScript數(shù)據(jù)格式化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: