0

0

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

霞舞

霞舞

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

|

697人浏览过

|

来源于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;”这样的表达式。

LongShot
LongShot

LongShot 是一款 AI 写作助手,可帮助您生成针对搜索引擎优化的内容博客。

下载

随着我们继续构建我们的语言,我们将面临有趣的挑战。我们如何处理运算符优先级?我们如何实现 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工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

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

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

1502

2023.10.24

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

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

1502

2023.10.24

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

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

232

2024.02.23

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

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

87

2025.10.17

if什么意思
if什么意思

if的意思是“如果”的条件。它是一个用于引导条件语句的关键词,用于根据特定条件的真假情况来执行不同的代码块。本专题提供if什么意思的相关文章,供大家免费阅读。

778

2023.08.22

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

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

514

2023.06.20

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

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

244

2023.07.28

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

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

298

2023.08.03

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

1

2026.01.29

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
最新Python教程 从入门到精通
最新Python教程 从入门到精通

共4课时 | 22.4万人学习

Django 教程
Django 教程

共28课时 | 3.7万人学习

SciPy 教程
SciPy 教程

共10课时 | 1.3万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号