vue数组里面字符串截取只展示后四位,用逗号隔开展示

熊xing

于 2023-03-14 11:38:46 发布

阅读量945

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_47239395/article/details/129521279

版权

需求后端接口返回一个json,一级是一个对象, 对象里有个二级数组,里面有个cardNbr(卡号),

一 , 页面只要展示加密的卡号后四位,

二, 卡号四位之间用逗号隔开

三, 末尾逗号去掉

// 效果图是这样的
在这里插入图片描述
// 代码

// 接口返回的数据类似这样的格式
let jsonList = {
  id: 12123,
  name: "xiong_kzx",
  cardNbr: "3456******9876"
  sCardList: [
    { cardNbr: 3456******9876, id: 456546546},
    { cardNbr: 6544******1111, id: 456546546},
    { cardNbr: 3456******2222, id: 456546546},
    { cardNbr: 3456******3333, id: 456546546}
  ]
}

// 去循环拿到所有卡号,去截取
let cardList = ''
let list =  jsonList.sCardList
for (let i=0; i<list.length; i++) {
  cardList += list[i].cardNbr.substring(list[i].cardNbr.length - 4)
  this.otherCard = cardList // 展示只有一个卡号的情况
  // 判断二级存在多位卡的情况
  if (cardList && cardList.toString().length > 4) {
    let str = cardList.toString().replace(/(.{4})/g, '$1,') // 四位添加逗号隔开
    this.otherCard = str.substring(0, str.lastIndexOf(','))  // 去掉末尾的逗号
  }
}