当前位置：首页 > news >正文

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

news 来源：原创 2025/9/9 23:21:07

🌟 解锁 `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('//')：找到协议后的双斜杠（如 https:// 中的 //）。
- url.indexOf('/', url.indexOf('//') + 2)：从双斜杠后开始，找下一个斜杠（路径起点）。

🎉 示例

const url = "https://example.com/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 = "https://example.com/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 = ["https://example.com/img1.jpg", "https://example.com/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 = ["https://example.com/path/to/image1.jpg", "https://example.com/path/to/image2.jpg"]。
indexOf：定位每个 URL 的路径起点。
- "https://example.com/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 的强大能力。试试这些方法，优化你的数据处理吧！

在这里插入图片描述