زبان سازگار با جاوا اسکریپت خود را بسازید: تسلط بر طراحی کامپایلر

Summarize this content to 400 words in Persian Lang
ایجاد زبان برنامه نویسی خود که به جاوا اسکریپت کامپایل می شود سفری جذاب است. این پروژه‌ای است که مهارت‌های شما را به حداکثر می‌رساند و به شما درک عمیق‌تری از نحوه عملکرد زبان‌ها می‌دهد.

بیایید با اصول اولیه شروع کنیم. یک کامپایلر برای یک زبان سفارشی به جاوا اسکریپت معمولاً شامل سه مرحله اصلی است: تحلیل واژگانی، تجزیه و تولید کد.

تحلیل واژگانی اولین گام است. در اینجا، ما کد منبع خود را به توکن ها تقسیم می کنیم. اینها کوچکترین واحدهای معنی در زبان ما هستند. به عنوان مثال، در عبارت “let x = 5;”، نشانه هایی برای “let”، “x”، “=”، “5” و “;” داریم.

در اینجا یک lexer ساده در جاوا اسکریپت آمده است:

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;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این lexer می تواند تکالیف ساده ای مانند “let x = 5;” را انجام دهد. این پایه است، اما به شما ایده ای از نحوه عملکرد تحلیل واژگانی می دهد.

بعد تجزیه می آید. اینجا جایی است که ما جریان نشانه های خود را می گیریم و یک درخت نحو انتزاعی (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 خود را می گیریم و آن را به کد جاوا اسکریپت تبدیل می کنیم. در اینجا یک تولید کننده کد ساده وجود دارد:

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;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این فقط خراش دادن سطح است. یک کامپایلر زبان واقعی باید کارهای بیشتری را انجام دهد: توابع، ساختارهای کنترل، عملگرها و غیره. اما این به شما مزه چیزهایی را می دهد.

همانطور که زبان خود را گسترش می دهیم، باید انواع توکن های بیشتری را به lexer خود، انواع گره های بیشتری را به تجزیه کننده خود و موارد بیشتری را به تولید کننده کد خود اضافه کنیم. همچنین ممکن است بخواهیم یک مرحله بازنمایی میانی (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;” را مدیریت کند.

همانطور که به ساختن زبان خود ادامه می دهیم، با چالش های جالبی روبرو خواهیم شد. چگونه اولویت عملگر را مدیریت کنیم؟ چگونه ساختارهای کنترلی مانند دستورات 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;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ما می توانیم این تابع را در هر گره در مرحله تولید کد فراخوانی کنیم.

یکی دیگر از موضوعات پیشرفته، تولید نقشه منبع است. نقشه های منبع به دیباگرها اجازه می دهد بین جاوا اسکریپت تولید شده و کد منبع اصلی ما نقشه برداری کنند و اشکال زدایی را بسیار آسان تر می کند.

همانطور که در طراحی زبان عمیق تر می شویم، شروع به درک تفاوت های ظریف و مبادلات موجود می کنیم. آیا زبان ما باید قوی تایپ شود یا پویا؟ چگونه بیان و ایمنی را متعادل کنیم؟ چه نحوی زبان ما را بصری و آسان برای استفاده می کند؟

ساختن زبانی که به جاوا اسکریپت کامپایل می‌شود، دیدگاه منحصربه‌فردی از خود جاوا اسکریپت به ما می‌دهد. ما شروع می کنیم به اینکه چرا تصمیمات طراحی خاصی گرفته شده است، و درک عمیق تری از ویژگی ها و ویژگی های زبان به دست می آوریم.

علاوه بر این، این پروژه می تواند درک ما از زبان ها و ابزارهای دیگر را به میزان قابل توجهی افزایش دهد. بسیاری از مفاهیمی که با آنها روبرو می شویم – محدوده واژگانی، سیستم های نوع، جمع آوری زباله – برای طراحی و پیاده سازی زبان برنامه نویسی اساسی هستند.

شایان ذکر است که در حالی که ما در حال کامپایل کردن به جاوا اسکریپت هستیم، بسیاری از این اصول برای سایر زبان‌های هدف نیز اعمال می‌شوند. هنگامی که اصول اولیه را درک کردید، می توانید کامپایلر خود را با خروجی پایتون، جاوا یا حتی کد ماشین تطبیق دهید.

همانطور که پایان می دهیم، واضح است که ساختن یک ترانسپایلر زبان کار کوچکی نیست. این پروژه ای است که می تواند با شما رشد کند و همیشه چالش ها و فرصت های یادگیری جدید را ارائه می دهد. چه به دنبال ایجاد یک زبان خاص دامنه برای یک مشکل خاص باشید، یا فقط در مورد نحوه کار زبان ها کنجکاو باشید، این پروژه یک راه عالی برای تعمیق دانش برنامه نویسی شما است.

به یاد داشته باشید، هدف لزوما ایجاد زبان برنامه نویسی بزرگ بعدی نیست. ارزش واقعی در سفر است – درکی که به دست می آورید، مشکلاتی که حل می کنید، و روش های جدیدی از تفکر که ایجاد می کنید. بنابراین از آزمایش کردن، اشتباه کردن و شکست دادن مرزهای آنچه که فکر می کنید ممکن است نترسید. کد نویسی مبارک!

مخلوقات ما

حتماً خلاقیت های ما را بررسی کنید:

مرکز سرمایه گذار | زندگی هوشمند | دوره ها و پژواک ها | اسرار گیج کننده | هندوتوا | Elite Dev | مدارس JS

ما در حالت متوسط ​​هستیم

بینش کوآلای فنی | دوران و پژواک جهان | سرمایه گذار مرکزی متوسط | رازهای گیج کننده رسانه | رسانه علم و عصر | هندوتوای مدرن

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;
}

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;
}

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;

// 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;

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;
}