持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情
前言与需求
那天在群里，看到友仔在群里咨询，有没有老铁教教我呀~ 想起自己曾经无助的自己，我没有一刻停滞，我来帮你想想吧！
经过
就简单跟这位同学说了一下思路，先这样；再那样；最后这样就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>
文章小尾巴
文章写作、模板、文章小尾巴可参考：《写作“小心思”》
感谢你看到最后，最后再说两点~
①如果你持有不同的看法，欢迎你在文章下方进行留言、评论。
②如果对你有帮助，或者你认可的话，欢迎给个小点赞，支持一下~
我是南方者，一个热爱计算机更热爱祖国的南方人。
（文章内容仅供学习参考，如有侵权，非常抱歉，请立即联系作者删除。）
