重学前端
程劭非(winter)
前手机淘宝前端负责人
立即订阅
32956 人已学习
课程目录
已完结 58 讲
0/4登录后,你可以任选4讲全文学习。
开篇词+学习路线+架构图 (3讲)
开篇词 | 从今天起,重新理解前端
免费
明确你的前端学习路线与方法
列一份前端知识架构图
模块一:JavaScript (15讲)
JavaScript类型:关于类型,有哪些你不知道的细节?
JavaScript对象:面向对象还是基于对象?
JavaScript对象:我们真的需要模拟类吗?
JavaScript对象:你知道全部的对象分类吗?
JavaScript执行(一):Promise里的代码为什么比setTimeout先执行?
JavaScript执行(二):闭包和执行上下文到底是怎么回事?
JavaScript执行(三):你知道现在有多少种函数吗?
JavaScript执行(四):try里面放return,finally还会执行吗?
JavaScript词法:为什么12.toString会报错?
(小实验)理解编译原理:一个四则运算的解释器
JavaScript语法(预备篇):到底要不要写分号呢?
JavaScript语法(一):在script标签写export为什么会抛错?
JavaScript语法(二):你知道哪些JavaScript语句?
JavaScript语法(三):什么是表达式语句?
JavaScript语法(四):新加入的**运算符,哪里有些不一样呢?
模块二:HTML和CSS (16讲)
HTML语义:div和span不是够用了吗?
HTML语义:如何运用语义类标签来呈现Wiki网页?
CSS语法:除了属性和选择器,你还需要知道这些带@的规则
HTML元信息类标签:你知道head里一共能写哪几种标签吗?
CSS 选择器:如何选中svg里的a元素?
CSS选择器:伪元素是怎么回事儿?
HTML链接:除了a标签,还有哪些标签叫链接?
CSS排版:从毕升开始,我们就开始用正常流了
HTML替换型元素:为什么link一个CSS要用href,而引入js要用src呢?
HTML小实验:用代码分析HTML标准
CSS Flex排版:为什么垂直居中这么难?
CSS动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?
HTML语言:DTD到底是什么?
CSS渲染:CSS是如何绘制颜色的?
CSS小实验:动手做,用代码挖掘CSS属性
HTML·ARIA:可访问性是只给盲人用的特性么?
模块三:浏览器实现原理与API (9讲)
浏览器:一个浏览器是如何工作的?(阶段一)
浏览器:一个浏览器是如何工作的?(阶段二)
浏览器:一个浏览器是如何工作的(阶段三)
浏览器:一个浏览器是如何工作的?(阶段四)
浏览器:一个浏览器是如何工作的?(阶段五)
浏览器DOM:你知道HTML的节点有哪几种吗?
浏览器CSSOM:如何获取一个元素的准确位置
浏览器事件:为什么会有捕获过程和冒泡过程?
浏览器API(小实验):动手整理全部API
模块四:前端综合应用 (5讲)
性能:前端的性能到底对业务数据有多大的影响?
工具链:什么样的工具链才能提升团队效率?
持续集成:几十个前端一起工作,如何保证工作质量?
搭建系统:大量的低价值需求应该如何应对?
前端架构:前端架构有哪些核心问题?
特别加餐 (9讲)
新年彩蛋 | 2019,有哪些前端技术值得关注?
用户故事 | 那些你与“重学前端”的不解之缘
期中答疑 | name(){}与name: function() {},两种写法有什么区别吗?
答疑加餐 | 学了这么多前端的“小众”知识,到底对我有什么帮助?
加餐 | 前端与图形学
加餐 | 前端交互基础设施的建设
期末答疑(一):前端代码单元测试怎么做?
期末答疑(二):前端架构中,每个逻辑页面如何可以做到独立发布呢?
加餐 | 一个前端工程师到底需要掌握哪些技能?
尾声 (1讲)
尾声 | 长风破浪会有时,直挂云帆济沧海
重学前端
登录|注册

JavaScript词法:为什么12.toString会报错?

winter 2019-03-19
你好,我是 winter。
在前面的文章中,我们已经从运行时的角度了解过 JavaScript 的知识内容,在接下来的几节课,我们来了解一下 JavaScript 的文法部分。
文法是编译原理中对语言的写法的一种规定,一般来说,文法分成词法和语法两种。
词法规定了语言的最小语义单元:token,可以翻译成“标记”或者“词”,在我的专栏文章中,我统一把 token 翻译成词。
从字符到词的整个过程是没有结构的,只要符合词的规则,就构成词,一般来说,词法设计不会包含冲突。词法分析技术上可以使用状态机或者正则表达式来进行,我们的课程主要是学习词法,关于它们实现的细节就不多谈了。

概述

我们先来看一看 JavaScript 的词法定义。JavaScript 源代码中的输入可以这样分类:
WhiteSpace 空白字符
LineTerminator 换行符
Comment 注释
Token 词
IdentifierName 标识符名称,典型案例是我们使用的变量名,注意这里关键字也包含在内了。
Punctuator 符号,我们使用的运算符和大括号等符号。
NumericLiteral 数字直接量,就是我们写的数字。
StringLiteral 字符串直接量,就是我们用单引号或者双引号引起来的直接量。
Template 字符串模板,用反引号` 括起来的直接量。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(21)

  • 🐻🔫🐸
    为啥不支持直接回复呢?

    这里讨论一下@Snow同学的问题 别忘了JS是允许直接写小数的,也就说12.toString() 他无法分辨你是想要创建一个小数位为toString()的数 还是创建一个12 然后调用toString()这种情况。也就说 JS里面的. 是拥有两种含义的 一种是小数点 一种是方法调用。 你可以试试12..toString() 这样就可以消除这种歧义
    2019-03-24
    25
  • 华洛
    我真的觉得这些东西已经超出普通前端对于基础的定义了。
    2019-03-25
    20
  • 田野的嘴好冰
    零宽空格
    var a = '\uFEFF',b = 'b', c = 'c', d = (b+a+c);
    console.log(d); //bc
    console.log(d.length); //3
    console.log(d.indexOf(a)); //1
    2019-03-26
    18
  • 曾侃
    之前没有接触过零宽字符,学完这节课后网上搜了下零宽字符的应用,看到了这篇文章《[翻译]小心你复制的内容:使用零宽字符将用户名不可见的插入文本中》,受益匪浅。自己用这个思路实现了一样的给字符串添加水印的功能。
    代码地址:https://github.com/zengkan0703/text-watermark,有不对的地方请同学们指正。
    2019-04-10
    12
  • 是零壹呀
    12.toString() 会被解析成 12.(数字字面量) 和 toString()。
    所以正常的写法是12..toString()才是正常的
    2019-04-24
    4
  • Nandy
    十进制的number的小数点前后的内容可以省略,但是不能同时省略
            .01 = 0.01 10. = 10
    12.toString() 12.被当做了一个整体,所以会报错,
    加入空格 12 .toString() 这样.就成为了一个单独的token

    嘻嘻~请winter老师表扬我学的认真(#^.^#)

    作者回复: 对 表扬。

    2019-07-25
    1
    3
  • 商志远🤪
    【理论上,“ ${ } ”内部可以放任何 JavaScript 表达式代码,而这些代码是以“ } ” 结尾的,也就是说,这部分词法不允许出现“ } ”运算符。】
    这段话没理解
    2019-03-19
    1
    3
  • CaveShao
    js 中 . 有两种含义,一种是代表一个小数,一种是调用方法。12.toString() 中的 12. 会被浏览器解析为一个省略了小数后面部分的数字。一个数字后面直接写一个方法,就像 333toString 一样,肯定会报错。
    Invalid or unexpected token
    2019-05-20
    2
  • Smallfly
    ${} 的括号中完全可以出现 } 符号呀,老师你别骗人哦。

    `${function(){console.log(1)}}`

     输出:

    "function(){console.log(1)}"
    2019-10-17
    1
    1
  • 一步
    正则表达式冲突,这时候对词法分析来说,其实是没有办法处理的,所以 JavaScript 的解决方案是定义两组词法,然后靠语法分析传一个标志给词法分析器,让它来决定使用哪一套词法。

    对于这句活我有个疑问,不是先进行词法分析,然后在进行语法分析吗?

    难道这里是词法分析分析出来两种,然后在语法分析的选择其中的一种?????
    2019-03-29
    1
  • 小细胞
    查到了一篇文章是用零宽空格,零宽非连接符和零宽连接符来抓信息泄露源头的
    2019-12-02
  • 小飒
    打卡
    2019-08-30
  • better man
    转义字符' 产生字符为"是什么意思???没看懂,有没有理解的人举个例子解惑下
    2019-08-02
    2
  • lsy
    '敏\u200d感词'.length === 4 // true

    作者回复: 别干坏事啊

    2019-07-10
  • 伍二娃
    function f(){
        console.log(arguments);
    }

    var a = "world"
    f`Hello ${a}!`; // [["Hello ", "!"], "world"]
    2019-06-28
  • 大海
    为什么parseInt(12).toString()就不会报错呢,parseInt(12)返回的不也是一个数值吗

    作者回复: 感觉白讲了......

    2019-06-19
    5
  • 0xAC7
    @Snow同學
    --------------------------------
    只有我看完,还是不知道12.toString()为什么会报错嘛?
    --------------------------------

    我的理解是,12.toString() 前面的“12.”(注意有点)对于引擎来讲是有歧义的,这到底是代表浮点数,还是代表要转为数字的包装对象,然后调用 toString 方法呢?引擎默认代表是浮点数,这个时候如果要调用 toString 方法,需要再加一个点,像这样:12..toString()。
    顺便说一句,中文也有很多歧义呢。
    2019-04-14
  • 桂马
    经典的USD.replace(/\B(?=(\d{3})+$)/g,',')
    2019-04-02
    1
  • 一步
    @商志远🤪
    你可以尝试一下在控制台输入:`test } ${}` 看看会发生什么?

    Uncaught SyntaxError: Unexpected token }
    2019-03-29
    1
  • Sky-fly
    重学前端是夯实前端基础,那前端进阶方向在哪里?还是一定要修一门后端语言扩展服务端,希望老师可以指点迷津😊
    2019-03-21
收起评论
21
返回
顶部