javascript 分号_JavaScript中的分号

javascript 分号

Semicolons in JavaScript divide the community. Some prefer to use them always, no matter what. Others like to avoid them.

JavaScript中的分号分隔社区。 有些人更喜欢始终使用它们，无论如何。 其他人喜欢避免它们。

After using semicolons for years, in the fall of 2017 I decided to try avoiding them as needed, and I did set up Prettier to automatically remove semicolons from my code, unless there is a particular code construct that requires them.

在使用分号多年之后，在2017年秋天，我决定尝试根据需要避免使用分号，并且我确实设置了Prettier来自动从我的代码中删除分号，除非有特定的代码构造需要它们。

Now I find it natural to avoid semicolons, I think the code looks better and it’s cleaner to read.

现在，我发现避免分号是很自然的事情，我认为代码看起来更好，而且阅读起来也更简洁。

This is all possible because JavaScript does not strictly require semicolons. When there is a place where a semicolon was needed, it adds it behind the scenes.

这都是可能的，因为JavaScript并不严格要求分号。 当有需要分号的地方时，它将其添加到幕后。

The process that does this is called Automatic Semicolon Insertion.

执行此操作的过程称为自动分号插入 。

It’s important to know the rules that power semicolons, to avoid writing code that will generate bugs because does not behave like you expect.

重要的是要知道支持分号的规则，以避免编写代码，因为它们的行为不符合您的预期而会生成错误。

JavaScript自动分号插入规则 (The rules of JavaScript Automatic Semicolon Insertion)

The JavaScript parser will automatically add a semicolon when, during the parsing of the source code, it finds these particular situations:

JavaScript解析器在解析源代码期间发现以下特殊情况时，将自动添加分号：

1. when the next line starts with code that breaks the current one (code can spawn on multiple lines)
   当下一行以中断当前代码的代码开头时(代码可以在多行中产生)

2. when the next line starts with a }, closing the current block

   当下一行以}开头时，关闭当前块

3. when the end of the source code file is reached
   当到达源代码文件的末尾

4. when there is a return statement on its own line

   当在自己的行上有一个return语句时

5. when there is a break statement on its own line

   当一行上有一个break语句时

6. when there is a throw statement on its own line

   当在自己的行上有一个throw语句时

7. when there is a continue statement on its own line

   当在自己的行上有一个continue语句时

不符合您的想法的代码示例 (Examples of code that does not do what you think)

Based on those rules, here are some examples.

根据这些规则，下面是一些示例。

Take this:

拿着这个：

const hey = 'hey'
const you = 'hey'
const heyYou = hey + ' ' + you

['h', 'e', 'y'].forEach((letter) => console.log(letter))

You’ll get the error Uncaught TypeError: Cannot read property 'forEach' of undefined because based on rule 1 JavaScript tries to interpret the code as

您将收到错误Uncaught TypeError: Cannot read property 'forEach' of undefined因为基于规则1 JavaScript尝试将代码解释为

const hey = 'hey';
const you = 'hey';
const heyYou = hey + ' ' + you['h', 'e', 'y'].forEach((letter) => console.log(letter))

---

---

Such piece of code:

这段代码：

(1 + 2).toString()

prints "3".

打印"3" 。

const a = 1
const b = 2
const c = a + b
(a + b).toString()

instead raises a TypeError: b is not a function exception, because JavaScript tries to interpret it as

而是引发TypeError: b is not a function异常，因为JavaScript尝试将其解释为

const a = 1
const b = 2
const c = a + b(a + b).toString()

---

---

Another example based on rule 4:

基于规则4的另一个示例：

(() => {
  return
  {
    color: 'white'
  }
})()

You’d expect the return value of this immediately-invoked function to be an object that contains the color property, but it’s not. Instead, it’s undefined, because JavaScript inserts a semicolon after return.

您希望此立即调用的函数的返回值是一个包含color属性的对象，但事实并非如此。 相反，它是undefined ，因为JavaScript在return之后插入一个分号。

Instead you should put the opening bracket right after return:

相反，您应该在return后将左括号放在右边：

(() => {
  return {
    color: 'white'
  }
})()

---

---

You’d think this code shows ‘0’ in an alert:

您可能会认为此代码在警报中显示“ 0”：

1 + 1
-1 + 1 === 0 ? alert(0) : alert(2)

but it shows 2 instead, because JavaScript per rule 1 interprets it as:

但它改为显示2，因为JavaScript根据规则1将其解释为：

1 + 1 -1 + 1 === 0 ? alert(0) : alert(2)

结论 (Conclusion)

Be careful. Some people are very opinionated on semicolons. I don’t care honestly, the tool gives us the option not to use it, so we can avoid semicolons.

小心。 有些人对分号很自以为是。 老实说，我不在乎，该工具为我们提供了不使用它的选择，因此我们可以避免使用分号。

I’m not suggesting anything, other than picking your own decision.

除了自行决定外，我什么也没建议。

We just need to pay a bit of attention, even if most of the times those basic scenarios never show up in your code.

即使在大多数情况下，这些基本方案在您的代码中都没有出现，我们只需要引起一点注意。

Pick some rules:

选择一些规则：

• be careful with return statements. If you return something, add it on the same line as the return (same for break, throw, continue)

  小心return语句。 如果您返回某些内容，请将其添加到返回内容的同一行(与break ， throw和continue )

• never start a line with parentheses, those might be concatenated with the previous line to form a function call, or array element reference
  从不以括号开头的行，它们可能与前一行连接在一起以形成函数调用或数组元素引用

And ultimately, always test your code to make sure it does what you want

最后，请始终测试您的代码以确保其能够满足您的要求

翻译自: https://flaviocopes.com/javascript-automatic-semicolon-insertion/

javascript 分号