讲师中心 微信公众号
AI工具推荐 视频效率加速

构建您自己的 JavaScript 兼容语言:掌握编译器设计

大伟大大_6516

大伟大大_6516

发布时间:2024-11-16 08:12:02

|

717人浏览过

|

来源于dev.to

转载

构建您自己的 javascript 兼容语言:掌握编译器设计

创建自己的可编译为 javascript 的编程语言是一段迷人的旅程。这个项目将把您的技能推向极限,并让您更深入地了解语言的底层工作原理。

让我们从基础开始。 javascript 的自定义语言编译器通常涉及三个主要阶段:词法分析、解析和代码生成。

词法分析是第一步。在这里,我们将源代码分解为令牌。这些是我们语言中最小的意义单位。例如,在语句“let x = 5;”中,我们有“let”、“x”、“=”、“5”和“;”的标记。

这是一个简单的 javascript 词法分析器:

function lexer(input) {
    let tokens = [];
    let current = 0;

    while (current < input.length) {
        let char = input[current];

        if (char === '=' || char === ';') {
            tokens.push({ type: 'operator', value: char });
            current++;
            continue;
        }

        if (/\s/.test(char)) {
            current++;
            continue;
        }

        if (/[a-z]/i.test(char)) {
            let value = '';
            while (/[a-z]/i.test(char)) {
                value += char;
                char = input[++current];
            }
            tokens.push({ type: 'identifier', value });
            continue;
        }

        if (/\d/.test(char)) {
            let value = '';
            while (/\d/.test(char)) {
                value += char;
                char = input[++current];
            }
            tokens.push({ type: 'number', value });
            continue;
        }

        throw new error('unknown character: ' + char);
    }

    return tokens;
}

这个词法分析器可以处理简单的赋值,例如“let x = 5;”。它很基础,但它让您了解词法分析的工作原理。

立即学习“Java免费学习笔记(深入)”;

接下来是解析。这是我们获取令牌流并构建抽象语法树(ast)的地方。 ast 代表了我们程序的结构。

这是我们语言的一个简单解析器:

function parser(tokens) {
    let current = 0;

    function walk() {
        let token = tokens[current];

        if (token.type === 'identifier' && token.value === 'let') {
            let node = {
                type: 'variabledeclaration',
                name: tokens[++current].value,
                value: null
            };

            current += 2; // skip the '='
            node.value = walk();

            return node;
        }

        if (token.type === 'number') {
            current++;
            return { type: 'numberliteral', value: token.value };
        }

        throw new typeerror(token.type);
    }

    let ast = {
        type: 'program',
        body: []
    };

    while (current < tokens.length) {
        ast.body.push(walk());
    }

    return ast;
}

这个解析器可以处理简单的变量声明。它不是很强大,但它说明了这个概念。

最后一步是代码生成。这是我们将 ast 转换为 javascript 代码的地方。这是一个简单的代码生成器:

function codegenerator(node) {
    switch (node.type) {
        case 'program':
            return node.body.map(codegenerator).join('\n');

        case 'variabledeclaration':
            return 'let ' + node.name + ' = ' + codegenerator(node.value) + ';';

        case 'numberliteral':
            return node.value;

        default:
            throw new typeerror(node.type);
    }
}

现在我们可以把它们放在一起:

function compile(input) {
    let tokens = lexer(input);
    let ast = parser(tokens);
    let output = codegenerator(ast);
    return output;
}

console.log(compile('let x = 5;'));
// outputs: let x = 5;

这只是表面现象。真正的语言编译器需要处理更多内容:函数、控制结构、运算符等等。但这可以让您体验一下所涉及的内容。

随着我们扩展语言,我们需要向词法分析器添加更多标记类型,向解析器添加更多节点类型,向代码生成器添加更多案例。我们可能还想在解析和代码生成之间添加一个中间表示(ir)阶段,这可以使执行优化变得更容易。

让我们添加对简单算术表达式的支持:

// add to lexer
if (char === '+' || char === '-' || char === '*' || char === '/') {
    tokens.push({ type: 'operator', value: char });
    current++;
    continue;
}

// add to parser
if (token.type === 'number' || token.type === 'identifier') {
    let node = { type: token.type, value: token.value };
    current++;

    if (tokens[current] && tokens[current].type === 'operator') {
        node = {
            type: 'binaryexpression',
            operator: tokens[current].value,
            left: node,
            right: walk()
        };
        current++;
    }

    return node;
}

// add to code generator
case 'binaryexpression':
    return codegenerator(node.left) + ' ' + node.operator + ' ' + codegenerator(node.right);

case 'identifier':
    return node.value;

现在我们的编译器可以处理像“let x = 5 + 3;”这样的表达式。

macOS UI 自动化技能包 —— 用 Python 控制你的 Mac
macOS UI 自动化技能包 —— 用 Python 控制你的 Mac

让 macOS 自动化像说话一样简单 —— 用代码控制你的 Mac,无需学习 AppleScript 系统要求 macOS 14+ (Sonoma) Python 3.9+ 需要开启:辅助功能 + 屏幕录制权限

下载

随着我们继续构建我们的语言,我们将面临有趣的挑战。我们如何处理运算符优先级?我们如何实现 if 语句和循环等控制结构?我们如何处理函数和变量范围?

这些问题引导我们进入更高级的主题。我们可以实现一个符号表来跟踪变量及其范围。我们可以添加类型检查以在运行前捕获错误。我们甚至可以实现自己的运行时环境。

一个特别有趣的领域是优化。一旦我们有了 ast,我们就可以对其进行分析和转换,以使生成的代码更加高效。例如,我们可以实现常量折叠,在编译时评估常量表达式:

function optimize(node) {
    if (node.type === 'BinaryExpression' &&
        node.left.type === 'NumberLiteral' &&
        node.right.type === 'NumberLiteral') {
        let result;
        switch (node.operator) {
            case '+': result = Number(node.left.value) + Number(node.right.value); break;
            case '-': result = Number(node.left.value) - Number(node.right.value); break;
            case '*': result = Number(node.left.value) * Number(node.right.value); break;
            case '/': result = Number(node.left.value) / Number(node.right.value); break;
        }
        return { type: 'NumberLiteral', value: result.toString() };
    }
    return node;
}

我们可以在代码生成阶段在每个节点上调用此函数。

另一个高级主题是源映射生成。源映射允许调试器在生成的 javascript 和我们的原始源代码之间进行映射,从而使调试变得更加容易。

随着我们深入研究语言设计,我们开始理解其中的细微差别和权衡。我们的语言应该是强类型的还是动态类型的?我们如何平衡表现力和安全性?什么语法将使我们的语言直观且易于使用?

构建一种可编译为 javascript 的语言也让我们对 javascript 本身有了独特的视角。我们开始明白为什么做出某些设计决策,并且我们对语言的怪癖和功能有了更深入的了解。

此外,这个项目可以显着增强我们对其他语言和工具的理解。我们遇到的许多概念 - 词法作用域、类型系统、垃圾收集 - 都是编程语言设计和实现的基础。

值得注意的是,当我们编译为 javascript 时,其中许多原则也适用于其他目标语言。一旦了解了基础知识,您就可以调整编译器以输出 python、java 甚至机器代码。

当我们结束时,很明显构建一个语言转译器并不是一件容易的事。这是一个可以与您一起成长的项目,始终提供新的挑战和学习机会。无论您是想为特定问题创建特定于领域的语言,还是只是对语言的工作原理感到好奇,这个项目都是加深您的编程知识的绝佳方法。

请记住,目标不一定是创建下一个大型编程语言。真正的价值在于旅程——你获得的理解、你解决的问题以及你发展的新思维方式。因此,不要害怕尝试、犯错误,并突破你认为可能的界限。快乐编码!


我们的创作

一定要看看我们的创作:

投资者中心 | 智能生活 | 时代与回响 | 令人费解的谜团 | 印度教 | 精英开发 | js学校


我们在媒体上

科技考拉洞察 | 时代与回响世界 | 投资者中央媒体 | 令人费解的谜团 | 科学与时代媒介 | 现代印度教

热门AI工具

更多
讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

相关专题

更多
java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

6184

2023.10.24

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

6184

2023.10.24

Go语言中的运算符有哪些
Go语言中的运算符有哪些

Go语言中的运算符有:1、加法运算符;2、减法运算符;3、乘法运算符;4、除法运算符;5、取余运算符;6、比较运算符;7、位运算符;8、按位与运算符;9、按位或运算符;10、按位异或运算符等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

3144

2024.02.23

php三元运算符用法
php三元运算符用法

本专题整合了php三元运算符相关教程,阅读专题下面的文章了解更多详细内容。

1832

2025.10.17

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

4596

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1375

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1818

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

10143

2023.08.17

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

40

2026.10.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Uvicorn官方安装与入门手册
Uvicorn官方安装与入门手册

共0课时 | 0人学习

Python uv官方项目管理指南
Python uv官方项目管理指南

共0课时 | 0人学习

Python uv官方安装与入门文档
Python uv官方安装与入门文档

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn