前言与需求
那天在群里,看到友仔在群里咨询,有没有老铁教教我呀~ 想起自己曾经无助的自己,我没有一刻停滞,我来帮你想想吧!
经过
就简单跟这位同学说了一下思路,先这样;再那样;最后这样就ok了!其实,笔者想到简单的就是先把这50个字符串,切割成对应的解析,最后再合并即可。(如果有其他大佬有更好的思路或者更好的建议,欢迎评论区交流~)
代码讲解和完整代码
由于代码比较简单,而且也有比较完整的注释;如果其他友友不懂的,欢迎评论区来问哈~
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>输入50个字符的字符串,按照条码格式解析</title></head><body> <input style="width: 500px;" id="input" type="text" placeholder="QDJA000001335D2017SUNOEBPOPTL000000000000000000000" value="QDJA000001335D2017SUNOEBPOPTL000000000000000000000"> <button onclick="myClick()">解析</button></body><style></style><script> // 原理:50个字符串,分割指定长度大小;匹配对应条码格式即可 // 车身颜色(对应关系) var carColorDB = { "EBPO": "酷感红", "ECPT": "珍珠白5", "EEPM": "凛冽青", "EEPN": "心悦蓝", }; // 高低压(对应关系) var carPresDB = { "高压版": "#PTL8#,#PTH6#,#PTK8#,", "低压版": "#PTE2#,#PTG1#,#PTK7#,#PTM9#,#PTN6#,", } // 输入的条码字符串(20220515202022051522是预留的20位字符串) var codeText = "QDJA000001335D2017SUNOEBPOPTL8" + "20220515202022051522"; function myClick() { var input = document.getElementById("input"); var inputValue = input.value; console.log(inputValue); console.log(inputValue.length); var text = getCarEncode(inputValue); if (text) { alert(text); } } alert("测试demo\n" + getCarEncode(codeText)); function getCarEncode(codeText) { if (!codeText || codeText.length != 50) { // 如果没传值或,值的大小不为50位,直接返回 alert("请输入50位需要对应解析的车条码") return; } // 获取当前前10位的字符串(即车身号) var carNumber = codeText.slice(0, 10); // 获取第10~14位的字符串(即车型) var carModel = codeText.slice(10, 14); // 获取第14~18位的字符串(即车型年) var carYear = "车型年 " + codeText.slice(14, 18); // 获取第18~22(即天窗) var carWindos = codeText.slice(18, 22); // 获取第22~26(即车身颜色) var carColor = codeText.slice(22, 26); // 获取第26~30(即高低压) var carPres = codeText.slice(26, 30); // 预留的20位字符串(前10位:上线时间;后10位下线时间) var carDate = codeText.slice(30, 50); // 车型和车身颜色,直接拼接字符串即可 var carModelStr = getCarModel(carModel); // 这里封装成一个方法 var dateStr = getBetweenDate(carDate); var perfectText = carModelStr + "," + carYear + "," + getCarColor(carColor) + "," + getCarWindos(carWindos) + "," + getCarPres(carPres) + "," + dateStr; console.log(perfectText); return perfectText; } // console.log("条码字符串", codeText); // console.log("车身号", carNumber); // console.log("车型", carModel); // console.log("车型年", carYear); // console.log("天窗", carWindos); // console.log("车身颜色", carColor); // console.log("高低压", carPres); // console.log(getCarModel(carModel)); // 拼接完整匹配对应的车型 function getCarModel(carModel) { var isH = carModel.slice(carModel.length - 1, carModel.length); var text = isH == "H" ? "高配" : "低配";// 三元表达式 return carModel + "B_400_" + text; } // 计算对应时间,返回 function getBetweenDate(carDate) { var startDate = carDate.slice(0, 10); var endDate = carDate.slice(10, 20); var betweenDate = endDate - startDate; if (betweenDate <= 0) { return "上线时间记录为零"; } // console.log(sliceDate(startDate)); // console.log(sliceDate(endDate)); // console.log(betweenDate); var startDateMap = sliceDate(startDate); var endDateMap = sliceDate(endDate); var dateStr = "该车上线时间为" + getStringDate(startDateMap) + ",下线时间为" + getStringDate(endDateMap); // 计算年 var betweenYear = endDateMap.year - startDateMap.year; // 相差的时间,字符串形式 var dateText = "装配时间为"; if (betweenYear > 0) { dateText += betweenYear + "年"; // 年 } var betweenMonth = endDateMap.month - startDateMap.month; if (betweenMonth > 0) { dateText += betweenMonth + "月"; // 月 } var betweenDay = endDateMap.day - startDateMap.day; if (betweenDay > 0) { dateText += betweenDay + "日"; // 日 } var betweenTime = endDateMap.time - startDateMap.time; if (betweenTime > 0) { dateText += betweenTime + "小时"; // 时 } return dateStr + "," + dateText; } // 获取对应字符串类型的日期(年、月、日、时间) function getStringDate(dateMap) { var { year, month, day, time } = dateMap; // 时间类型(1:上午;2:下午;3:晚上) var timeType = "上午"; if (time < 6) { // 时间在 0~6点之间 timeType = "晚上"; } else if (time < 12) { // 时间在 6~12点之间 timeType = "上午"; } else if (time < 18) { // 时间在 12~18点之间 timeType = "下午"; } else { timeType = "晚上"; } if (time > 12) { // 超过12小时减去 time -= 12; } return year + "年" + month + "月" + day + "日" + timeType + time + "点"; } // 切割日期的字符串(返回map形式) function sliceDate(date) { var year = date.slice(0, 4); var month = date.slice(4, 6); if (month < 10) { // 避免出现月份带01月的格式 month %= 10; } var day = date.slice(6, 8); if (day < 10) { // 避免出现日带01日的格式 day %= 10; } var time = date.slice(8, 10); return { year, month, day, time }; } // 车身颜色处理 function getCarColor(carColor) { return "颜色为" + carColorDB[carColor]; } // 处理是否是否带天窗 function getCarWindos(carWindos) { return carWindos == "SUN3" ? "带天窗" : "不带天窗"; } // 匹配获取高低压版 function getCarPres(carPres) { var pres = ""; for (var key in carPresDB) { if (carPresDB[key].indexOf(carPres)) { pres = key; break; } } return pres; } showNanFangZheMsg(); function showNanFangZheMsg() { console.log("*************************************************") console.log("****** 输入50个字符的字符串,按照条码格式解析 *******") console.log("************ 字符串解析 - 掘金 - 南方者 ***********") console.log("* https://juejin.cn/user/2840793779295133/posts *") console.log("************* https://nanfangzhe.cn/ ************") console.log("*************************************************") }</script></html>
文章小尾巴
文章写作、模板、文章小尾巴可参考:《写作“小心思”》 感谢你看到最后,最后再说两点~ ①如果你持有不同的看法,欢迎你在文章下方进行留言、评论。 ②如果对你有帮助,或者你认可的话,欢迎给个小点赞,支持一下~ 我是南方者,一个热爱计算机更热爱祖国的南方人。 (文章内容仅供学习参考,如有侵权,非常抱歉,请立即联系作者删除。)
原文:https://juejin.cn/post/7101482615835721736