js数组格式字符串处理

news2024/9/27 12:15:43

文章目录

  • 一. 前言
  • 二. 数组还原
      • 1. 方法一
      • 2. 方法二
      • 3. 方法三
      • 4. 方法四


一. 前言

由于数据传输的问题我们常常在请求后拿到数组格式的字符串,一般情况分为以下四种:

let str1 = '["a","b","c","d"]'; // 类型一
let str2 = "['a','b','c','d']"; //类型二
let str3 = '[1, 2, 3, 4]'; // 类型三 方法四处理
let str4 = "[1, 2, 3, 4]"; // 类性四 方法四处理

那么该如何将它们还原成我们js中的数组类型呢?

二. 数组还原

1. 方法一

我们可以使用 JSON.parse() 的方法将他么转换成js的数组类型:
类型一是可以通过这个方法进行还原成功的,类型一测试

// 还原成功
let str = '["a","b","c","d"]';
let arr = JSON.parse(str);
console.log(arr);

而类型二使用这个方法将会还原失败,类型二测试

let str = "['a','b','c','d']";
let arr = JSON.parse(str);
console.log(arr);

发生报错:
在这里插入图片描述
所以类型二是不适用这种方法的。

2. 方法二

第二种方法是使用eval函数进行还原,但是这种方法是存在安全隐患的,这种方法不管是类型一还是类型二都是可以成功还原成数组的:
类型一测试

let str = '["a","b","c","d"]';
let arr = eval('(' + str + ')');
console.log(arr); // 成功

类性二测试

let str = "['a','b','c','d']";
let arr = eval('(' + str + ')');
console.log(arr); // 成功

注意:这种方式开发时谨慎使用

3. 方法三

方法三是先使用正则表达式将字符串所有的单引号全部替换为双引号,然后再使用JSON.parse() 方法将其转化为数组类型:
类型一测试

let str = '["a","b","c","d"]';
let str_arr = str.replace(/'/g, '\"')
console.log(str_arr);
let arr = JSON.parse(str_arr);
console.log(arr); // 成功

类性二测试

let str = "['a','b','c','d']";
let str_arr = str.replace(/'/g, '\"')
console.log(str_arr);
let arr5 = JSON.parse(str_arr);
console.log(arr); // 成功

4. 方法四

方法四是先使用正则的方式将首位两端的括号以及引号去除再使用split()函数对逗号进行分割再存放进新的数组:
类型一测试

let str1 = '["a","b","c","d"]';
let str2 = str1.substr(1) // 删除首字符
let str3 = str2.substring(0, str2.length - 1) // 删除尾字符
console.log(str3); // "a","b","c","d"
let arr = [];
for (const item of str3.split(",")) {
		arr.push(item.replace(/"/g, ""))
}
console.log(arr); // 成功

类型二测试

let str1 = "['a','b','c','d']";
let str2 = str1.substr(1) // 删除首字符
let str3 = str2.substring(0, str2.length - 1) // 删除尾字符
console.log(str3); // 'a', 'b', 'c', 'd'
let arr = [];
for (const item of str3.split(",")) {
		arr.push(item.replace(/'/g, ""))
}
console.log(arr); // 成功

类型三测试

let str1 = '[1,2,3,4]';
let str2 = str1.substr(1) // 删除首字符
let str3 = str2.substring(0, str2.length - 1) // 删除尾字符
console.log(str3); // 'a', 'b', 'c', 'd'
let arr = [];
for (const item of str3.split(",")) {
		arr.push(Number(item))
}
console.log(arr); // 成功

类性四测试

let str1 = "[1, 2, 3, 4]";
let str2 = str1.substr(1) // 删除首字符
let str3 = str2.substring(0, str2.length - 1) // 删除尾字符
console.log(str3); // '1', '2', '3', '4'
let arr = [];
for (const item of str3.split(",")) {
		arr.push(Number(item))
}
console.log(arr); // 成功

最后关于删除首位字符的方法可以参考这篇文章:点击跳转
最后这种方法值得一提的情况!那就是字符串数组不标准比如:“[‘a’, ‘b’, ‘c’, ‘d’]” 细看其实逗号后面是有一个空白符的,如果使用上面的切片方法这个空白符也会被切入进处理好的数组,解决这个问题和简单只要使用空格去除即可,列如:

let str1 = "['a', 'b', 'c', 'd']";
let str2 = str1.substr(1) // 删除首字符
let str3 = str2.substring(0, str2.length - 1) // 删除尾字符
console.log(str3); // 'a', 'b', 'c', 'd'
let arr = [];
for (const item of str3.split(",")) {
		arr.push(item.replace(/'/g, "").replace(/^\s*|\s*$/g, ""))
}
console.log(arr); // 成功

重点:最后的最后我想说,这种并不是前端的错误,数组存储格式的问题就是后端的问题,如果小伙伴们遇到这种情况建议跟你的leader提一下把后端送到电子厂去练习两年半。

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

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

相关文章

【异常解决】The coordinator is not available

问题 最近上线跑了一个flink任务,运行不久,就会挂掉,初步查看日志报错如下 WARN org.apache.flink.connector.kafka.source.reader.KafkaSourceReader [] - Failed to commit consumer offsets for checkpoint 1 org.apache.kafka.clients…

IGBT窄脉冲现象

IGBT窄脉冲现象 tips:资料来自知乎 英飞凌《IGBT窄脉冲现象解读》 IGBT窄脉冲现象 1.什么是窄脉冲现象? 2.窄脉冲现象的原因 3.双脉冲测试IGBT窄脉冲开通 4.FWD窄脉冲开通 1.什么是窄脉冲现象? IGBT作为一种功率开关,从门级信号到器件开关过程…

用Python制作邮件检测器

github地址: https://github.com/CaLlMeErIC/MailDetective 因为需求需要写一个简单的邮件检测系统的框架,这里记录下思路 首先第一反应,这个检测系统不应该是各个邮件收件系统都有自带的吗,于是搜索了下是否有相关的邮件检测开源软件&#…

行测-判断推理-图形推理-样式规律-属性规律-对称性

中心对称:可以看作,图上的每一个点,都能关于中心点,在图上找到另一个对称的点五个图都是轴对称图形,只有答案C是轴对称图形选C都是中心对称图形选A1 3 5中心对称2 4 6轴对称中心对称选B对称轴顺时针45旋转选A对称轴的数…

极智项目 | 实战pytorch arcface人脸识别

欢迎关注我的公众号 [极智视界],获取我的更多经验分享 大家好,我是极智视界,本文介绍 实战pytorch arcface人脸识别,并提供完整项目源码。 本文介绍的实战arcface人脸识别项目,提供完整的可以一键训练、测试的项目工程…

微信公众号历史作品定向采集

最近有遇到微信公众号历史作品采集的需求,这里做一下记录, 登录自己注册好的的微信公众号后台进入创作界面,点击右上角的引用: 弹出如下界面: 选择查找公众号文章,输入要查找的公众号: 回车: 同时就可以打开F12开始抓包,选择公众号点击进入: appmsg?action=li…

golang 整合antlr语法校验

1. 背景 在项目中我们可能会遇到表达式检索的场景,例如,输入以下表达式检索,需要解析表达式并得到检索结果。 ip"192.168.1.3" && (port"80" || protocol"http")此时,我们需要对语法进行…

Linux启动过程

theme: channing-cyan 两种启动方式 传统启动方式(LEGACYMBR) 指传统BIOS启动方式,存在一些不足:比如最大只支持2TB磁盘,磁盘最多四个分区,且不支持图形操作 UEFIGPT方式 是新式的启动方式&#xff0c…

数学小课堂:三次方程(定理发明的过程)

文章目录 引言I 一元三次方程1.1 通解发明权之争1.2 费拉里-塔尔塔利亚公式1.3 Mathematica1.4 数学定理发明的过程引言 学习数学,最重要的是把实际问题变成数学问题,然后知道如何利用各种软件工具来解决。 方程是一个能把具体问题,等量转化成类型问题的好工具。 一元三次方…

Jetson AGX Orin安装Anaconda、Cuda、Cudnn、Pytorch最全教程

文章目录一:Anaconda安装二:Cuda、Cudnn安装三:Pytorch安装一:Anaconda安装 Jetson系列边缘开发板,其架构都是arm64,而不是传统PC的amd64,深度学习的环境配置方法大不相同。想要看amd64的相关环…

智能家居项目(六)之摄像头模块

目录 一、树莓派mipg-streamer实现监控功能调试 1、实现基本思路 2、安装摄像头模块 2.1、在安装sudo apt-get install libv4l-dev 的命令时报错 3、开启摄像头 以下内容是针对树莓派是stretch版本的修改办法: 一、树莓派mipg-streamer实现监控功能调试 1、…

有哪些前端面试题是必须要掌握的

对浏览器的缓存机制的理解 浏览器缓存的全过程: 浏览器第一次加载资源,服务器返回 200,浏览器从服务器下载资源文件,并缓存资源文件与 response header,以供下次加载时对比使用; 下一次加载资源时&#x…

Flow API搭建指南

搭建Flow API,首先需要安装知行之桥EDI系统,注意,Flow API为新增功能,仅在2022版本(8336)及以后支持,如果你发现正在使用的产品没有这个功能,可以在我们官网下载最新版本或者联系我们…

将企业文件共享解决方案与数据丢失防护配对

您的企业文件共享解决方案是否足够?企业文件共享解决方案已经是一种加密移动中敏感数据的好方法,但仅加密是不够的。 您能否确保不会意外传输敏感信息?您是否可以审核谁发送了什么?最后但并非最不重要的一点是,您是否…

【Autoware】2小时安装Autoware1.13(保姆级教程)

前言:ROS的出现使得机器人软件开发更加快速和模块化,在此基础上,Autoware.ai开源项目可以让我们很容易地将一套完整的自动驾驶软件部署到我们的测试车辆上,并见证它跑起来! 文章目录1.Autoware简介2.电脑软硬件配置要求…

爆肝更新 Python 100道基础入门练习题(附答案)

前言 大家早好、午好、晚好吖 ❤ ~ 更多精彩内容、资源皆可点击文章下方名片获取此处跳转 实例001:数字组合 题目: 有四个数字:1、2、3、4,能组成多少个互不相同且无重复数字的三位数?各是多少? 程序分…

合宙入门教程之luat开发教程

合宙入门教程准备工作连接电脑建工程与烧录测试demo之main.lua实验现象准备工作 1.开发板(1块) 2.Luatools_v2.exe (烧录固件软件) 3.USB驱动 跳转合宙官网链接 连接电脑 1.首先安装合宙开发工具,其次安装USB驱动。…

【JAVA】一个项目如何预先加载数据?

这里写目录标题需求实现AutowiredPostConstruct实例CommandLineRunner实例ApplicationListener实例参考需求 一般我们可能会有一些在应用启动时加载资源的需求,局部或者全局使用,让我们来看看都有哪些方式实现。 实现 Autowired 如果是某个类里需求某…

山东大学机器学习期末2022

接力:山东大学机器学习期末2021 本来是不想写的,因为不想回忆起考试时啥也不会的伤痛,没想到最后给分老师海底捞,心情好了一些,还是一块写完 备考建议:多看ppt,多看ppt,多看ppt 山东…

关于 Android 线程优化这些知识你都该了解

前言在实际项目开发中会频繁的用到线程,线程使用起来是很简单,但是滥用线程会带来性能问题, 比如启动一个线程至少 占用16kb的内存、线程过多会导致cpu的频繁切换而cpu切换成本是很高的、消耗大量用户电量等问题, 所以应该让app的…