javascript - 这里的加号有什么用？

Question

我有一个简单的 javascript 语法问题。我在下面有这个链接，它有一个使用 d3.js 呈现条形图的代码片段。

https://plnkr.co/edit/HQz1BL9SECFIsQ5bG8qb?p=preview

我不明白的是..

在script.js文件中，有一条语句，

 data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.value = +d.value;
});

如果您像这样删除加号前缀的 d.value，

  data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.value = d.value;
});

如您所见，y 轴上的刻度值发生了变化。但据我所知，在值之前加上 + 意味着将任何值转换为数字类型。

如果您查看 bar-data.csv 文件中的数据，所有值都是数字，所以我认为无论是否删除 + 都不会真正改变...？

Answer 1

“...如果您查看 bar-data.csv 文件中的数据，所有值都是数字”...不，实际上在文件加载后它们不是数字/parsed: 它们是字符串。

发生的事情是 d3.csv，它使用 dsv.parse，将所有字段加载为字符串。你可以在 API 中看到这个:

If a row conversion function is not specified, field values are strings. For safety, there is no automatic conversion to numbers, dates, or other types. (emphasis mine)

我们可以很容易地证明这一点。假设我们有这个 CSV，以数字作为值:

foo,bar
17,34
42,12

由于 Stack 片段不允许我们保存 CSV 文件，因此我将在此处使用 d3.csvParse 而不是 d3.csv，但结果是相同。查看控制台:

var csv = `foo,bar
17,34
42,12`;

var data = d3.csvParse(csv);

data.forEach(function(d) {
  for (key in d) {
    console.log(d[key] + ": " + typeof d[key])
  }
})

<script src="https://d3js.org/d3.v5.min.js"></script>

现在让我们使用一元加号来仅转换 foo 列中的值:

var csv = `foo,bar
17,34
42,12`;

var data = d3.csvParse(csv, row);

data.forEach(function(d) {
  for (key in d) {
    console.log(d[key] + ": " + typeof d[key])
  }
})

function row(d) {
  d.foo = +d.foo;
  return d;
}

<script src="https://d3js.org/d3.v5.min.js"></script>

---

PS:如果您删除一元加号，只是为了解释您的 plunker 中的行为:CSV 中较高的数字是 478，用于轴的域。然而，去掉一元加号，更高的值变成了“53”，作为一个字符串，它比“478”高:

console.log("53" > "478")