如何在JSON字符串中嵌入动态数据？React对接JW Player API场景

你可以通过「先构造普通JS对象再序列化为JSON」的方式实现需求，这种方式比手动拼接JSON字符串更稳妥，不会出现转义错误。

实现步骤 #

• 首先你需要有存储输入框内容的React state，示例如下：

import { useState } from 'react'

// 存储输入框的下载链接
const [downloadUrl, setDownloadUrl] = useState('')

// 输入框绑定示例
<input 
  type="text" 
  value={downloadUrl} 
  onChange={(e) => setDownloadUrl(e.target.value)} 
  placeholder="输入视频下载链接"
/>

• 构造包含动态值的JS对象，直接把state变量填入对应字段：

const dataObj = {
  upload: {
    method: "fetch",
    // 这里直接填入存储输入值的state变量
    download_url: downloadUrl
  },
  metadata: {
    title: "My Fetch Video",
    author: "Dzenis H."
  }
}

• 使用JSON.stringify()方法将JS对象转换为符合API要求的JSON字符串：

const data = JSON.stringify(dataObj)

注意事项 #

• 不推荐手动拼接JSON字符串的写法，这种写法如果输入内容包含双引号、特殊字符时，很容易破坏JSON格式，导致请求失败。如果确实需要用模板字符串实现，写法参考如下（不推荐使用）：

// 仅做参考，不建议在生产环境使用
const data = `{ "upload": { "method": "fetch", "download_url": "${downloadUrl}" }, "metadata": {"title": "My Fetch Video", "author": "Dzenis H."} }`

• JSON.stringify会自动处理特殊字符的转义、字段引号补全等问题，是处理JSON序列化的最优方案。

内容的提问来源于stack exchange，提问作者Dženis H.