关于#前端#的问题：后端返回字符串类型的多个数字，前端如何转化为对应的文字且用逗号隔开

问题

后端返回字符串类型的多个数字，前端如何转化为对应的文字且用逗号隔开？

代码

<template>
  <div class="home">
    <table class="pure-table pure-table-bordered">
      <thead>
        <tr>
          <th>#th>
          <th>信息类型th>
        tr>
      thead>

      <tbody v-for="(item, index) in typeData" :key="index">
        <tr>
          <td>{{ item.id }}td>
          { item.enableTypes}} -->
          <td>{{ getTypeData(item.enableTypes) }}td>
        tr>
      tbody>
    table>
  div>
template>
 // 假设是后端返回的数据
      typeData: [
        {
          enableTypes: "0,1",
          id: "100001",
          user: "张三",
        },
        {
          enableTypes: "1,2",
          id: "100002",
          user: "李四",
        },
        {
          enableTypes: "2,3",
          id: "100003",
          user: "王五",
        },
        {
          enableTypes: "0,3",
          id: "100004",
          user: "赵六",
        },
      ],

结果

不能转化为中文且逗号隔开

// 映射
      typeMap: [
        {
          value: "微信",
          type: 0,
        },
        {
          value: "QQ",
          type: 1,
        },
        {
          value: "邮箱",
          type: 2,
        },
        {
          value: "语音",
          type: 3,
        },
      ],
// 计算属性
  computed: {
    getTypeData() {
      console.log(444);
      return (str) => {
        return String(str.split(",").map((item) => this.typeMap[item].value));
      };
    },
  }

"0,1"这不是用逗号隔开了吗

直接后端的数据for循环输出旁边+‘，’

维护一个字典或者集合，根据enableTypes值进行转换，切分逗号使用split，合并使用join

var arr = ['比', '如', '这', '样']
function getTypeData(enableTypes){
    return enableTypes.split(',').map(key => arr[key] || '').join(',')
}