写文章

Javascript词法结构你懂吗？

吐槽君 分类：javascript

“词法结构”就是编程语言中的一套规则，它制定了如何使用这门语言编写程序。

今天就来介绍一下JavaScript的词法结构。

涵盖内容如下：

  • 注释
  • 大小写的区分、空格和换行符
  • 什么是字面量
  • Unicode是什么、有什么用
  • 有什么保留字
  • 标识符是什么
  • 可选的分号，真的好吗

注释

JavaScript支持两种注释，单行注释（//）、多行注释（/**/）

// 这就是单行注释

/* 这就是多行注释 */
/*
 *这也是多行注释
 *多行注释
 */

大小写的区分、空格和换行符

大小写

JavaScript 是区分大小写的。这就是意味着for和FOR或者For是不一样的

空格

JavaScript忽略程序中记号之间的空格。很大程度上也忽略换行符。

可能有人会问程序中记号之间的空格，记号这是什么？记号就是指一个关键字、变量名、数字、函数或者其他实体。我们看看下面的例子：

关键字、函数

for(var i = 0;i< 5; i++){
  console.log(i);
}

for (var i = 0;i< 5; i++){
  console.log(i);
}

for   (var i = 0;i< 5; i++){
  console.log(i);
}

function a(){ console.log("我是function") }
function a (){ console.log("我是function") }

a(); // 我是function
a (); // 我是function
a  (); // 我是function

不只是声明函数、使用关键字的时候会忽略，函数在调用的时候也会忽略。

我们很多人应该都习惯了写函数的时候加一个空格，但是我们一直都不知道原来这是“词法结构“的内容。

这时有人会问这有什么意义吗？有使用场景吗？那看看下面这个

<a-input-password
  v-model="form.passWord"
  :maxLength="20"
  @change="(e, val) => handleInputChange(e, 'passWord')"
  @pressEnter="handleSubmit"
  ><a-icon slot="prefix" type="lock"
/></a-input-password>


<a-input-passwordv-model="form.passWord":maxLength="20"placeholder="请输入密码"@change="(e,val)=>handleInputChange(e,'passWord')"@pressEnter="handleSubmit"><a-icon slot="prefix" type="lock"/></a-input-password>

相信大家都喜欢前面那样的写法吧？这就是应用场景只是我们平时都不知道而已。这里也说明了很大程度上也是忽略了换行符的。

数字、变量名

var a   = 1     ;
console.log(a); // 1

var b  = 2,    c =    3;
console.log(b,c); // 2,3

其实大家都一直在使用就是不知道原来自己使用的是什么。

什么是字面量

顾名思义就是直接通过出现在程序上的一些数据值。比如：

  • 10
  • null
  • undefined
  • true
  • false
  • ‘Hello’
  • ‘hello’

Unicode是什么

Unicode 这个词应该挺常见的可是它是什么？有什么用呢？下面来讲讲吧。

因为在计算机中只是处理数字，而Unicode就是指定一个数字来储存字母或者其他字符，Unicode给每个字符提供了唯一的数字，不论什么平台、不论什么程序、不论什么语言。

我们看看转义序列

JavaScript定义了转义序列，所以可以使用ASCII字符来表示Unicode字符。

使用方式以\u 开头，后面跟4位十六进制数字（包括大写或小写的字面A～F）或包含在一对花括号内的1～6位十六进制数字。应该很多人没明白这是什么，我们看例子。

字符“é”的Unicode转义序列是\u00E9，是不是有点似曾相识的感觉了。接着看

Unicode转义序列可以出现在JavaScript字符串字面量、正则表达式字面量和标示符中（不能出现在语言关键字中）。我们看例子

let  \u00E9 = 1;
let  \u{E9} = 1;
console.log(é); // 1

也就是说我们可以通过Unicode 的转义序列做为变量名、正则表达式字面量和标示符。

如果没明白我觉得可以在浏览器的控制台试试这几行代码，在浏览器控制台上方便快捷。

好的到了场景问题了，建议亲手敲一敲这个代码。祝大家天天开心

console.log("\u{1F600}"); // "?"

这就是最贴近我们应用场景，所以我们需要一些特殊符号时候记得想起它哦。

Unicode归一化

怎么还有归一化呢？因为程序中如果用的不是ASCII字符，那么Unicode是允许多种编码方式表示同一字符的。我们看例子：

const \u{e9} = 1;
const e\u{301} = 2;
console.log(é); // 1
console.log(é); // 2

不明白没事，看下面这个
console.log(c\u{301}); // ć

现在应该能明白归一化了吧？虽然计算机能区分它们，但是我们实际开发中如果出现了是很难区分的毕竟长的一样，就好像两个台电脑外观一样，内心不一样，这难免会有认错它的时候。

保留字

在JavaScript中，一些标识符是保留字，不能用做变量、常量、函数、类的命名。

这里我们做一下区分，毕竟有绝对也有不绝对的。

绝对不能使用（但是能做为对象的属性）

  • if
  • while
  • for

在完全没有语法歧义的情绪下使用

  • from
  • of
  • get
  • set

其实最简单的做法就是不要使用以下的保留字

image-20210410192149679.png

标示符是什么

代码中用来标示变量、函数、属性的字符序列。也就是我们平时定义的变量，声明的函数，添加的属性。

标识符只能包含字母或者数字或者下划线('_')或者美元符合('$')，且不能以数字开头。

可选的分号，真的好吗？

为什么说是可选分号呢？因为JavaScript会自动识别语句的结尾，不过缺少必要分号作为结尾符时，会降低代码的可读性和整洁性有时还会导致报错。

比如：

{
  let a = 1
  let b = 2
}

let a = 1letb = 2   // SyntaxError: Invalid or unexpected token

在大括号内没加上分号时可以正常运行，不会报错，也遵守了规则，但是当代码写在同一行时就导致报错了

有时候还会引起误解

// 真实意图
let a
a
=
3
console.log(a) // 3

// 实际运行
let a;
a = 3;
console.log(a);

还有可能导致意外的情形

// 真实意图
let y = x + f
(a+b).toString()

// 实际运行
let y = x + f(a+b).toString()
 
// 真实意图
return 
true;

// 错将换行符解释为分号
return;
true;

所以说应该主动加上分号以表示该语句结束，不应该依靠JavaScript的自动识别。

文章讲的所有内容都是大家平时在开发中经常在做的事情，只是大家有没发现有些东西我们只是知道了怎么使用，却没去了解它的背后。

如果对你有帮助辛苦动动你的手指点个?吧。

回复

我来回复

  • 暂无回复内容