前端开发：JSON格式化、pre标签与React dangerouslySetInnerHTML实战

在前端开发中，开发者常处于项目协作链的末端。一旦页面出现样式瑕疵、数据格式异常或展示逻辑错误，前端人员通常是首要被提及的责任方。最常见的场景是，后端接口返回的数据结构往往与产品需求文档或设计稿的要求不一致，此时前端需要根据具体需求对数据进行清洗和重组，以符合预期的展示标准。

1.JSON格式数据展示

在复杂的表单交互场景中，后端接口常将一组字段封装为JSON字符串格式返回。而在表格或列表展示时，为了使用户能直观地阅读JSON数据，前端需要将其转换为格式化后的可读结构。

例如：

数据返回格式如下

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

但当字段数量较多时，直接查看原始JSON字符串会非常不便，因此需要进行如下处理：

console.log(JSON.stringify(JSON.parse(reponse)) ; //先将接口相应数据转为对象，再序列化。
  // 打印结果如下
{
    "title": "住址",
    "dataIndex": "address",
    "key": "address"
}

原理：JSON.stringify语法

JSON.stringify(value[, replacer[, space]]) space参数可选，用于控制文本的缩进、空格和换行符。如果space是一个数字，返回值将在每个层级缩进指定数量的空格。利用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"
}

补充说明，同一项目中不同后端开发人员可能对相同的数据结构返回不同的格式定义，上述方法也能很好地处理这种差异，例如：

//有些人按照习惯的方式将树状结构的子结构写成children
{
    a: 1,
    children: [
        {b: 1}
    ]
}
//但是有些人就随心所欲惯了，非写成childList
{
    a: 1,
    childList: [
        {b: 1}
    ]
}

在数据处理过程中，我们需要考虑将其统一为标准格式，以保持一致性。

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

2.使用<pre>标签

在开发实践中，textarea类型的表单经常返回包含换行符和空格的纯文本数据，格式如下：

"此例演示如何使用 pre 标签 \n对空行和空格\n进行控制"

处理此类数据时，只需在外层包裹一个pre标签即可保留原始格式。

  var a = "此例演示如何使用 pre 标签 \n对空行和 空格\n进行控制";
  <pre>{a}</pre>

3. React中使用dangerouslySetInnerHTML

开发中常遇到来自第三方编辑器的富文本数据，格式如下：

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

处理此类包含HTML标签的数据，我们应使用该属性进行渲染。

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

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

到此这篇关于JavaScript中常见的数据格式化方式详解的文章就介绍到这了,更多相关JavaScript数据格式化内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

JavaScript中常见的数据格式化方式详解

1.JSON格式数据展示

2.使用<pre>标签

3. React中使用dangerouslySetInnerHTML

实用工具推荐