javascript 分号_让我们谈谈JavaScript中的分号

javascript 分号

要使用它们，还是不使用它们… (To use them, or not to use them…)

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

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

I put out a poll on Twitter to test the waters, and I found lots of semicolon supporters:

我在Twitter上进行了一项民意测验以测试水域，然后发现了许多分号支持者：

After using semicolons for years, in the fall of 2017 I decided to try avoiding them when I could. I set up Prettier to automatically remove semicolons from my code, unless there was a particular code construct that required them.

在使用分号多年之后，在2017年秋天，我决定尽量避免使用分号。我将Prettier设置为自动从代码中删除分号，除非存在需要它们的特殊代码构造。

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

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

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

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

This is called Automatic Semicolon Insertion.

这称为自动分号插入 。

It’s important to know the rules that power semicolons. This will allow you to avoid writing code that will generate bugs before it 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解析器在解析源代码期间发现以下特殊情况时，将自动添加分号：

when the next line starts with code that breaks the current one (code can spawn on multiple lines)
当下一行以中断当前代码的代码开头时(代码可以在多行中产生)
when the next line starts with a }, closing the current block
当下一行以}开头时，关闭当前块
when the end of the source code file is reached
当到达源代码文件的末尾
when there is a return statement on its own line
当在自己的行上有一个return语句时
when there is a break statement on its own line
当一行上有一个break语句时
when there is a throw statement on its own line
当在自己的行上有一个throw语句时
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))

This piece of code:

这段代码：

(1 + 2).toString()

prints "3".

打印"3" 。

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

Instead, it 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 about semicolons. I don’t care, honestly. The tool gives us the option not to use it, so we can avoid semicolons if we want.

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

I’m not suggesting anything on one side or the other. Just make your own decision based on what works for you.

我不建议任何方面。只需根据适合您的条件做出自己的决定。

Regardless, we just need to pay a bit of attention, even if most of the time 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, as those might be concatenated with the previous line to form a function call, or an array element reference
切勿以括号开头，因为括号可能会与前一行连接在一起以形成函数调用或数组元素引用

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

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