基于MQTT通讯UNIapp程序解析JSON数据

1、解析函数无法解析{"ligh":0010}不规范的JSON数

//解析函数无法解析{"ligh":0010}不规范的JSON数据

if (e.method === 'receive') {//e 是 MQTT 事件对象,e.method 表示事件类型。当接收到 MQTT 消息时,method 的值是 'receive'

try {//try 语句开始一个错误处理块。如果块内的代码出现错误,会跳转到 catch 块,防止程序崩溃。

const data = typeof e.data === 'string'//检查 e.data 的数据类型是否是字符串,

? JSON.parse(e.data)//是字符串,使用 JSON.parse() 将其解析为 JavaScript 对象

: e.data//如果不是字符串(可能已经是对象),直接使用原值

if (data.ligh !== undefined) this.ligh = Number(data.ligh)//符串 "0010" → 数字 10(自动去掉前导0)

if (data.mode !== undefined) this.mode = Number(data.mode)

} catch (err) {//如果 try 块中的代码出现错误(比如 JSON 格式错误),会跳转到这里

console.error('JSON 解析失败', err)

}

}

2、修改:这个方案能稳定处理 {"ligh":0010} 这种格式,并且有很好的兼容性

if (e.method === 'receive') {

console.log('收到数据:', e.data)

// 将数据转为字符串处理

const rawData = String(e.data)

// 专用解析函数

const parseHardwareFormat = (str) => {

const result = {}

// 匹配 ligh:0010 或 "ligh":0010

const lighMatch = str.match(/ligh["]?\s*[:=]\s*0*(\d+)/i)// (只支持整数)

if (lighMatch) {

result.ligh = parseInt(lighMatch[1], 10)

}

// 匹配 mode:1 或 "mode":1

const modeMatch = str.match(/mode["]?\s*[:=]\s*0*(\d)/i)// (只支持整数)

if (modeMatch) {

result.mode = parseInt(modeMatch[1], 10)

}

return result

}

// 解析数据

const data = parseHardwareFormat(rawData)

console.log('解析结果:', data)

// 更新到组件

if (data.ligh !== undefined) this.ligh = data.ligh

if (data.mode !== undefined) this.mode = data.mode

}

程序解析:

const lighMatch = str.match(/ligh["]?\s*[:=]\s*0*(\d+)/i)解释下

1. //i

  • /:正则表达式的开始和结束分隔符

  • /i:忽略大小写标志,ligh 可以匹配 lighLIGHLigh

2. ligh

  • 匹配字面字符串 "ligh"

  • 因为 /i 标志,也匹配 LIGHLigh

3. ["]?

  • ["]:匹配一个双引号字符 "

  • ?:表示前面的字符可选(0次或1次)

  • 作用:匹配可能有引号也可能没有的情况

  • 示例:

    • "ligh" ✓(有引号)

    • ligh ✓(没有引号)

4. \s*

  • \s:匹配任意空白字符(空格、制表符、换行等)

  • *:表示前面的字符出现0次或多次

  • 作用:匹配键值对之间的空白

  • 示例:

    • ligh:0010 ✓(没有空格)

    • ligh :0010 ✓(有空格)

    • ligh :0010 ✓(多个空格)

5. [:=]

  • [:=]:字符集合,匹配 :=

  • 作用:匹配分隔符

  • 示例:

    • ligh:0010 ✓(使用冒号)

    • ligh=0010 ✓(使用等号)

6. \s*

  • 再次匹配可能的空白字符

  • 示例:

    • ligh: 0010 ✓(分隔符后有空格)

    • ligh:0010 ✓(没有空格)

7. 0*

  • 0:匹配数字0

  • *:0次或多次

  • 作用:匹配前导零

  • 示例:

    • 0010 → 匹配 00

    • 10 → 匹配空(没有前导0)

    • 0 → 匹配 0

8. (\d+)

  • \d:匹配数字(0-9)

  • +:1次或多次

  • ():捕获分组,提取匹配的内容

  • 作用:捕获实际的数值部分(去掉前导0后的数字)

  • 示例:

    • 0010 → 捕获 10

    • 4100 → 捕获 4100

    • 0 → 捕获 0

测试结果:

复制代码
"{"ligh":0010}" → 匹配组: "10" → 数值: 10
"{ligh:0020}" → 匹配组: "20" → 数值: 20
""ligh":0030" → 匹配组: "30" → 数值: 30
"ligh=0040" → 匹配组: "40" → 数值: 40
"ligh : 0050" → 匹配组: "50" → 数值: 50
"LIGH:0060" → 匹配组: "60" → 数值: 60
""LIGH" = 0070" → 匹配组: "70" → 数值: 70
"ligh:0" → 匹配组: "0" → 数值: 0
"ligh:100" → 匹配组: "100" → 数值: 100

3、如果要增加解析{"ligh":0.12}在这种浮点数呢

//支持不规则JSON整数与浮点数

if (e.method === 'receive') {

console.log('收到数据:', e.data)

// 将数据转为字符串处理

const rawData = String(e.data)

// 专用解析函数

const parseHardwareFormat = (str) => {

const result = {}

// 匹配 ligh:0010 或 "ligh":00.10

const lighMatch = str.match(/ligh["]?\s*[:=]\s*(\d*\.?\d+)/i)// (支持整数和小数)

if (lighMatch) {

// 使用 parseFloat 自动处理整数和小数

this.ligh = parseFloat(lighMatch[1])

console.log('光照值:', this.ligh)

}

// 匹配 mode:1 或 "mode":1

// mode 通常用整数

const modeMatch = rawData.match(/mode["]?\s*[:=]\s*(\d+)/i)

if (modeMatch) {

this.mode = parseInt(modeMatch[1], 10)

}

return result

}

// 解析数据

const data = parseHardwareFormat(rawData)

console.log('解析结果:', data)

// 更新到组件

if (data.ligh !== undefined) this.ligh = data.ligh

if (data.mode !== undefined) this.mode = data.mode

}

相关推荐
小陈工5 分钟前
2026年4月7日技术资讯洞察:下一代数据库融合、AI基础设施竞赛与异步编程实战
开发语言·前端·数据库·人工智能·python
Cobyte14 分钟前
3.响应式系统基础:从发布订阅模式的角度理解 Vue2 的数据响应式原理
前端·javascript·vue.js
竹林81818 分钟前
从零到一:在React前端中集成The Graph查询Uniswap V3池数据实战
前端·javascript
Mintopia25 分钟前
别再迷信"优化":大多数性能问题根本不在代码里
前端
倾颜25 分钟前
接入 MCP,不一定要先平台化:一次 AI Runtime 的实战取舍
前端·后端·mcp
军军君0128 分钟前
Three.js基础功能学习十八:智能黑板实现实例五
前端·javascript·vue.js·3d·typescript·前端框架·threejs
恋猫de小郭28 分钟前
Android 上为什么主题字体对 Flutter 不生效,对 Compose 生效?Flutter 中文字体问题修复
android·前端·flutter
Moment30 分钟前
AI全栈入门指南:一文搞清楚NestJs 中的 Controller 和路由
前端·javascript·后端
禅思院30 分钟前
前端架构演进:基于AST的常量模块自动化迁移实践
前端·vue.js·前端框架
程序员马晓博30 分钟前
前端并发治理:从 Token 刷新聊起,一个 Promise 就够了
前端·javascript