解锁indexOf、substring和JSON.stringify：从小程序图片上传看字符串魔法✨

🌟 解锁 indexOf、substring 和 JSON.stringify：从小程序图片上传看字符串魔法 ✨

在 JavaScript 中，字符串操作和数据序列化是开发中不可或缺的技能。indexOf、substring 和 JSON.stringify 是三个简单却强大的工具，分别用于定位子字符串、提取片段和将对象转为 JSON 字符串。今天，我们将以一个微信小程序的图片上传功能为例，深入探索这三个方法如何协作处理图片 URL，确保数据高效传递到后台。

本文从实践出发，带你领略字符串操作的魅力！

---

🎬 示例场景：小程序图片上传

我们开发一个微信小程序，用户上传产品照片后，数据通过 saveFakeRegistration 函数保存到后台。以下是关键代码：

/** * 保存/修改假货登记 * @param {Object} data - 要保存的假货登记数据 * @param {Boolean} isSubmit - 是否为提交线上协助比对 (true: 提交, false: 暂存) * @returns {Promise} 请求结果的Promise */ const saveFakeRegistration = (data, isSubmit = false) => { const sessionId = wx.getStorageSync('sessionId'); const adminToken = wx.getStorageSync('admin_token'); const inviteCodeId = wx.getStorageSync('inviteCodeId'); const fakeRegistration = { ...(data.id ? { id: data.id } : {}), productName: data.productName, productId: data.productId, purchaseChannel: data.channel || '', purchasePrice: data.price || '', contactInfo: data.contact || '', productPhotos: JSON.stringify((data.productImages || []).map(url => { const pathStart = url.indexOf('/', url.indexOf('//') + 2); return pathStart !== -1 ? url.substring(pathStart + 1) : url; })), purchaseRecords: JSON.stringify((data.purchaseRecords || []).map(url => { const pathStart = url.indexOf('/', url.indexOf('//') + 2); return pathStart !== -1 ? url.substring(pathStart + 1) : url; })), inviteCodeId: inviteCodeId, comparisonStatus: isSubmit ? 1 : 0 }; return new Promise((resolve, reject) => { wx.request({ url: `${path.BASE_API_URL}/fakeRegistration/registration/save`, method: 'POST', data: fakeRegistration, header: { 'content-type': 'application/json', 'token': adminToken, 'Cookie': sessionId }, success: (res) => { if (res.data.code === 0) resolve(res.data); else reject(new Error(res.data.msg || '保存失败')); }, fail: (error) => reject(error) }); }); };

我们将聚焦 productPhotos 和 purchaseRecords 的处理，分析 indexOf、substring 和 JSON.stringify 如何将图片 URL 转为后台所需的格式。

---

🔍 认识 indexOf：定位大师 🌟 定义

indexOf 是字符串方法，用于查找子字符串第一次出现的位置。

🌈 语法 string.indexOf(searchValue[, fromIndex]) 返回值：索引（找到）或 -1（未找到）。 🎨 在代码中的应用 const pathStart = url.indexOf('/', url.indexOf('//') + 2); 嵌套使用： url.indexOf('//')：找到协议后的双斜杠（如 中的 //）。url.indexOf('/', url.indexOf('//') + 2)：从双斜杠后开始，找下一个斜杠（路径起点）。 🎉 示例 const url = " example /path/to/image.jpg"; const doubleSlash = url.indexOf('//'); // 6 const pathStart = url.indexOf('/', doubleSlash + 2); // 19 console.log(pathStart); // 19 💡 作用 定位 URL 中路径部分的起点（第三个斜杠），为后续提取做准备。

---

✂️ 认识 substring：裁剪专家 🌟 定义

substring 从字符串中提取指定范围的子字符串。

🌈 语法 string.substring(start[, end]) start：开始索引。end（可选）：结束索引（不包含）。返回值：提取的子字符串。 🎨 在代码中的应用 return pathStart !== -1 ? url.substring(pathStart + 1) : url; 从第三个斜杠后（pathStart + 1）提取路径，去掉前面的协议和域名。 🎉 示例 const url = " example /path/to/image.jpg"; const pathStart = 19; const path = url.substring(pathStart + 1); // "path/to/image.jpg" console.log(path); 💡 作用 提取图片的相对路径（如 "path/to/image.jpg"），确保数据简洁。

---

📦 认识 JSON.stringify：打包能手 🌟 定义

JSON.stringify 将 JavaScript 对象或数组转换为 JSON 字符串。

🌈 语法 JSON.stringify(value[, replacer[, space]]) value：要转换的值。返回值：JSON 格式的字符串。 🎨 在代码中的应用 productPhotos: JSON.stringify((data.productImages || []).map(url => { const pathStart = url.indexOf('/', url.indexOf('//') + 2); return pathStart !== -1 ? url.substring(pathStart + 1) : url; })), 将处理后的路径数组转为 JSON 字符串。 🎉 示例 const images = [" example /img1.jpg", " example /img2.jpg"]; const paths = images.map(url => url.substring(url.indexOf('/', url.indexOf('//') + 2) + 1)); console.log(JSON.stringify(paths)); // '["img1.jpg", "img2.jpg"]' 💡 作用 将路径数组序列化为字符串，满足后台请求的格式。

---

🚀 三者的协作：从 URL 到路径 🎯 操作流程 输入：data.productImages = [" example /path/to/image1.jpg", " example /path/to/image2.jpg"]。indexOf：定位每个 URL 的路径起点。 " example /path/to/image1.jpg" -> pathStart = 19。 substring：提取路径。 url.substring(20) -> "path/to/image1.jpg"。 JSON.stringify：转为 JSON。 ["path/to/image1.jpg", "path/to/image2.jpg"] -> '["path/to/image1.jpg","path/to/image2.jpg"]'。 🎨 结果 fakeRegistration.productPhotos：'["path/to/image1.jpg","path/to/image2.jpg"]'。发送到后台的数据简洁高效。

---

🌼 优化与思考 🎈 潜在问题 格式假设：代码假设 URL 均为 "协议://域名/路径"，若格式异常（如无 //），可能出错。效率：嵌套 indexOf 可读性稍低。 🎉 优化方案 正则替代：productPhotos: JSON.stringify((data.productImages || []).map(url => url.replace(/^https?:\/\/[^/]+\//, ''))), 更简洁，但需测试兼容性。 异常处理：const pathStart = url.indexOf('/', url.indexOf('//') + 2); if (pathStart === -1) console.warn('Invalid URL:', url);

---

🎁 总结

indexOf、substring 和 JSON.stringify 是字符串处理与数据序列化的黄金组合：

indexOf 精准定位，解析 URL 结构。substring 灵活裁剪，提取关键信息。JSON.stringify 完美打包，适配后台。

在小程序图片上传中，三者协作将复杂 URL 转为简洁路径，展现了 JavaScript 的强大能力。试试这些方法，优化你的数据处理吧！

---