使用JSON.stringify的第三个参数,美化序列化后的值

news2025/1/6 18:38:08

事情是这样的,我在使用tiptap富文本编辑器,展示JSON代码,效果图肯定是这样的

假设我有一个javascript对象如下

const data = {
    a: test
}

想要实现上面的效果,肯定需要使用JSON.stringify

const editorData = JSON.stringify(data)

editorData是富文本用于渲染的数据,但是得到的效果如下:

格式不对,该有的换行和空格都没有。

所以这里就要用到JSON.stringify的另外的几个参数

  1. 第一个参数:需要序列化的值

  1. 第二个参数

  1. replacer函数:可以逐一处理【需要序列化的值】的属性,

  1. 数组:只有包含这个数组中的属性名才会被序列化到最终的 JSON 字符串中

  1. null或者不传:不做处理

  1. 第三个参数

  1. 指定缩进用的空白字符串,用于美化输出

  1. 数字:代表有多少个空格,上限为10;小于1意味着没有空格

  1. 字符串:用字符串(截取前10个字符)替换默认的无空格,进行序列化

  1. null或者不传:没有空格

在这个例子中第三个参数使用制表符 \t 更符合我们的要求,第二个参数没有用到,可以传null

const editorData = JSON.stringify(data, null, '\t')

这样就可以实现我们想要的效果了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/386105.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux中安装JDK8.跟学韩顺平

Linux中安装JDK8第16章Linux之JavaEE定制篇搭建JavaEE环境16.1 概述16.2安装JDK16.2.1安装步骤16.2.2测试是否安装成功第16章Linux之JavaEE定制篇搭建JavaEE环境 16.1 概述 如果需要在Linux下进行JavaEE的开发,我们需要安装如下软件 资料下载地址:百度…

【算法】BloomFilter概念和原理以及业务中的应用场景

思考:海量数据下去重,如果是非数值类型的话如何判断?1.什么是布隆过滤器 1970年由布隆提出的一种空间效率很高的概率型数据结构,它可以用于检索一个元素是否在一个集合中。 由只存0或1的位数组和多个hash算法, 进行判断数据 【一…

2023-03-03 mysql列存储-cpu占用100%-追踪思路

摘要: 最近在处理mysql列存储时, 发现在执行explain时, cpu占用达到了100%. 本文分析定位该问题的思路过程 现象: mysqld进程占用100%使用kill processlist终止会话, 无响应查看show processings; 发现一直在运行mysql> show processlist; +----+-----------------+-----…

图片服务器

文章目录一、项目简介二、功能及场景三、业务设计四、数据库设计准备图片表准备实体类五、API设计常用功能封装文件上传文件上传获取图片列表接口获取图片内容删除图片接口六、项目优化七、测试自动化测试测试用例一、项目简介 图片服务器:解决项目中插入图片的问题…

Java 运算符与类型转化

Java 运算符与类型转化 1 算术运算符 Java中的算术运算符主要有(加)、-(减)、*(乘)、/(除)、%(求余),它们都是二元运算符。 2 自增和自减运算…

Day906.grant语句 -MySQL实战

grant语句 Hi,我是阿昌,今天学习记录的是关于grant语句的内容。 在 MySQL 里面,grant 语句是用来给用户赋权的。 不知道有没有见过一些操作文档里面提到,grant 之后要马上跟着执行一个 flush privileges 命令,才能使…

搞懂它,带你学会高效配置交换机!

想了解更多IT学习资料,可关注公众号“IT运维大本营” 不同网段的用户想要进行三层通信,必须借助于路由表项,而VLANIF接口只能生成直连路由,实现不同网段间通过同一台设备互通,对于不同网段间跨设备…

【Linux】虚拟机设置ISO镜像、配置CentOS 7、设置快照

目录 一、设置ISO镜像 1.设置或编辑 2.配置光驱(DVD) 3.虚拟机快捷键设置 4.启动虚拟机 二、配置CentOS 7 三、设置快照 四、​​​​​​​虚拟网卡不显示怎么办? 💟 创作不易,不妨点赞💚评论❤️收…

安装打印机驱动程序的操作步骤,详细方法介绍

安装打印机驱动程序是使用打印机的前提条件,因此学会正确的安装方法是非常重要的。下面是安装打印机驱动程序的详细步骤分析,为你全面的讲解安装和出现故障如何处理等问题。 一.安装打印机的准备工作 在安装打印机驱动程序之前,需要先准备好…

【Java集合框架】篇六:Collections工具类

Collections 是一个操作 Set、List 和 Map 等集合的工具类。 1。 常用方法 Collections 中提供了一系列静态的方法对集合元素进行排序、查询和修改等操作,还提供了对集合对象设置不可变、对集合对象实现同步控制等方法(均为static方法)&…

软件测试6

一 css书写位置,引入方式 1.内嵌式:css写在style标签中,放在title标签的后面,因为html代码和css代码混在同一个文件中,所以叫内嵌式。 2.外链式:css代码和html代码分离,使用link标签设置href属…

UE 蓝图上帝视角

UE 蓝图上帝视角 UE5蓝图实现相机上帝视角控制,包括绕点旋转,水平平移,远近缩放 实现效果 绕点旋转 水平平移 实现功能 左键鼠标平移(相对于场景水平面平移)右键绕点旋转中间键视角前后移动(可以理解成…

linux网络管理、测试网络连通性

一、网络管理 在rhel7上,同时支持network.service和NetworkMananger.service(简称NM)。在rhel8上,已经废弃network.service,因此只能通过NM进行网络配置,包括静态ip和动态ip。在rhel8上,必须开启…

安卓短信自动填充踩坑

安卓短信自动填充踩坑 前言 最近弄了个短信自动填充功能,一开始觉得很简单,不就是动态注册个广播接收器去监听短信消息不就可以了吗?结果没这么简单,问题就出在机型的适配上。小米的短信权限、荣耀的短信监听都是坑,…

LabVIEW绘制带有两个不同标尺的波形图/图表

LabVIEW绘制带有两个不同标尺的波形图/图表拥有多组不同标尺的数据,想要在LabVIEW中显示这些数据。能否在同一张波形图/图表中使用多个不同的标尺绘制这些数据?通过在同一波形图上使用多个轴,可以使用不同的标尺绘制数据。请按照以下步骤操作…

【网络】-- 网络基础

(本文是网络的宏观的概念铺垫) 目录 计算机网络背景 网络发展 认识 "协议" 网络协议初识 协议分层 OSI七层模型 TCP/IP 五层(或四层)模型 报头 以太网 碰撞 路由器 IP地址和MAC地址 IP地址与MAC地址总结 IP地址 MAC地址 计算机…

混合图像python旗舰版

仔细看这个图像。然后后退几米再看。你看到了什么?混合图像是指将一张图片的低频与另一张图片的高频相结合的图片。根据观看距离的不同,所得到的图像有两种解释。在上面的图片中,你可以看到阿尔伯特爱因斯坦,一旦你离开屏幕或缩小…

UG曲面造型-搭建轮廓和曲面创建(通过网格曲面,填充曲面,割面补面,曲面合格性分析)

先在xy平面创建一段圆弧,圆弧两端固定在坐标轴上在yz平面创建一段圆弧,圆弧两端固定在坐标轴上最后在xz平面创建圆弧,圆弧两端与之前的两个圆弧端点重合完成之后的草图如下:接下来构造曲面:方法1:采用通过曲…

HTML、CSS学习笔记5(移动端基础知识、Flex布局)

一、移动端基础知识 1.PC端和移动端区别 移动端:手机版网页,手机屏幕小,网页宽度多数为100%,没有版心 PC端:电脑版网页,屏幕大,网页固定版心 PC端和移动端不是同一个网页 2.如何在电脑里面…

pytorch-模型训练常用的torchvision包。关于数据、模型、数据增强、优化器、损失函数。用官方的实现,自定义模型训练

pytoch关于图像数据的部分 一般情况下处理图像、文本、音频和视频数据时,可以使用标准的Python包来加载数据到一个numpy数组中。 然后把这个数组转换成 torch.*Tensor。 图像可以使用 Pillow, OpenCV 音频可以使用 scipy, librosa 文本可以使用原始Python和Cython…