如何在字符串文字中传递字符串数组？答案

【问题标题】：How to pass an array of strings in string literal?如何在字符串文字中传递字符串数组？
【发布时间】：2018-09-20 05:10:38
【问题描述】：

我在字符串文字中有一个 json 对象

chartOptionsStr = `{
    "chart": {
      "type": "line"
    },
    "title": {
      "text": ""
    },
    "subtitle": {
      "text": ""
    },
    "xAxis": {
      "categories": ${categories},
      "labels": {
        "align":"right",
        "rotation":"0"
    }
    },
    "yAxis": {
      "title": {
        "text": "Number of Messages"
      },
    "tickInterval": 5
    },
    "plotOptions": {
      "line": {
        "dataLabels": {
          "enabled": false
        },
        "enableMouseTracking": true
      }
    },
    "series": [{
      "name": "Sent",
      "data": [37.0, 26.9, 30.5, 47.5]
    }, {
      "name": "Delivered",
      "data": [27.0, 16.9, 20.5, 37.5]
    }, {
      "name": "Open",
      "data": [27.0, 16.9, 20.5, 37.5]
    }]
  }`;

在这个对象中我需要传递一个数组类别

["19.Dec","12.Jan","15.Feb","28 Mar"]  as a dynamic value using ${categories}

但问题是当我控制这个 chartOptionsStr 时，它显示以下输出：

{
    "chart": {
      "type": "line"
    },
    "title": {
      "text": ""
    },
    "subtitle": {
      "text": ""
    },
    "xAxis": {
      "categories": 12.Dec,18.Dec,20.Dec,1.Jan,
      "labels": {
        "align":"right",
        "rotation":"0"
    }
    },
    "yAxis": {
      "title": {
        "text": "Number of Messages"
      },
    "tickInterval": 5
    },
    "plotOptions": {
      "line": {
        "dataLabels": {
          "enabled": false
        },
        "enableMouseTracking": true
      }
    },
    "series": [{
      "name": "Sent",
      "data": [37.0, 26.9, 30.5, 47.5]
    }, {
      "name": "Delivered",
      "data": [27.0, 16.9, 20.5, 37.5]
    }, {
      "name": "Open",
      "data": [27.0, 16.9, 20.5, 37.5]
    }]
  }

作为单个值附加的字符串数组。

是否有任何机构对此有解决方案？

我正在尝试从角度服务中获取 highcharts 的类别。所以这个值是动态的。

【问题讨论】：

使用 JSON.parse 将字符串转换为对象并分配类别。如果您想再次使用 JSON.stringify() 转换为字符串格式

标签： javascript arrays angular highcharts ecmascript-6

【解决方案1】：

你为什么要把 JSON 变成一个字符串？

您应该将 JSON 创建为普通对象；

chartOptionsJson = {
  "chart": {
    "type": "line"
  },
  "title": {
    "text": ""
  },
  "subtitle": {
    "text": ""
  },
  "xAxis": {
    "categories": categories,
    "labels": {
      "align":"right",
      "rotation":"0"
  }
  },
  "yAxis": {
    "title": {
      "text": "Number of Messages"
    },
  "tickInterval": 5
  },
  "plotOptions": {
    "line": {
      "dataLabels": {
        "enabled": false
      },
      "enableMouseTracking": true
    }
  },
  "series": [{
    "name": "Sent",
    "data": [37.0, 26.9, 30.5, 47.5]
  }, {
    "name": "Delivered",
    "data": [27.0, 16.9, 20.5, 37.5]
  }, {
    "name": "Open",
    "data": [27.0, 16.9, 20.5, 37.5]
  }]
};

那么在注入数组的时候就不需要把categories变量包装成${categories}了，直接把变量传给对象就好了。

【讨论】：

正如我所提到的，我正在使用角度服务来获取 ${categories}，如果我分配 this.categories 其结果未定义。所以我在订阅调用中使用字符串文字并分配服务数据，然后再使用 JSON.parse(chartOptionsJson);
看我的回答。 categories 已定义，您无需调用this.categories。你不需要先把它变成一个字符串，你可以像上面的例子一样传递变量。
@MuraliKrishna 如果您坚持使用 JSON 字符串，那么您仍然应该使用对象字面量并在其上使用 JSON.stringify。

【解决方案2】：

如果您决定实现此行为，您可以使用：

const categoriesStr = `["${categories.join('", "')}"]`;
...
"xAxis": {
  "categories": ${categoriesStr},
   ...
}

【讨论】：