如何使用Template Literals打印多维数组且不转为字符串？

嘿，这个问题我太熟悉了！当你在模板字符串里直接嵌入多维数组时，JavaScript会自动调用数组的toString()方法，这就导致嵌套的数组被彻底扁平化，变成一串逗号分隔的数字，完全丢失了原有的结构。不过咱们有几个好用的办法能解决这个问题：

方法1：用JSON.stringify()转成结构化字符串 #

这个方法能把数组转成带缩进的JSON格式字符串，完美保留嵌套结构，不管是打印还是后续处理都很方便：

const multidimensionalArray = [[1, 2], [3, 4, 5], [6, 7, 8, 9]];
// 第三个参数2表示缩进2个空格，让输出更易读
console.log(`My nested Array: ${JSON.stringify(multidimensionalArray, null, 2)}`);

输出结果会是：

My nested Array: [
  [
    1,
    2
  ],
  [
    3,
    4,
    5
  ],
  [
    6,
    7,
    8,
    9
  ]
]

方法2：用控制台占位符%o #

如果你只是在浏览器或Node.js控制台调试，用%o占位符更灵活——它会把数组以可展开的对象形式打印出来，方便你直接在控制台查看嵌套内容：

const multidimensionalArray = [[1, 2], [3, 4, 5], [6, 7, 8, 9]];
console.log(`My nested Array: %o`, multidimensionalArray);

这样控制台里的数组会和你直接console.log(multidimensionalArray)一样，是可展开的结构，同时还能带上你自定义的前缀文本。

方法3：拆分参数传递（简单直接） #

如果不需要严格用模板字符串拼接，直接把数组作为第二个参数传给console.log也能达到目的，代码更简洁：

const multidimensionalArray = [[1, 2], [3, 4, 5], [6, 7, 8, 9]];
console.log('My nested Array:', multidimensionalArray);

为什么直接用模板字符串会出问题？ #

再回顾一下你给出的示例，就能明白背后的原因：

const multidimensionalArray = [[1, 2], [3, 4, 5], [6, 7, 8, 9]];
console.log(multidimensionalArray ); // 输出: [ [ 1, 2 ], [ 3, 4, 5 ], [ 6, 7, 8, 9 ] ]
console.log(`My nested Array: ${multidimensionalArray}`); // 输出: My nested Array: 1,2,3,4,5,6,7,8,9

当你在模板字符串中用${}插值时，JavaScript会把插值的变量转成字符串，对于数组来说就是调用它的toString()方法。而数组的toString()会递归地将所有子数组也转成字符串，最后用逗号把所有元素连起来，自然就丢失了嵌套结构。

内容的提问来源于stack exchange，提问作者Chunky Chunk