程式碼生成
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
程式碼產生是指將工作區中的區塊轉換為可執行的程式碼字串的程序。
程式碼產生功能非常重要，因為它可讓區塊實際執行操作，例如評估算術運算式、在迷宮中移動角色，或設定網路商店！
您無法直接「執行」區塊。而是產生程式碼字串，然後執行這些字串。
語言代碼產生器
如要產生程式碼，您必須選擇要產生的文字語言。這是因為每種語言都有專屬的程式碼產生器。
語言程式碼產生器 (通常稱為程式碼產生器) 是一種類別，可處理產生特定語言程式碼的規則，但不針對個別區塊。舉例來說，它會處理格式化註解、縮排陳述式和引號字串等事項。
Blockly 提供 5 個內建程式碼產生器：
- JavaScript ES5
- Python 3
- Lua 5.1
- Dart 2
- PHP 7
如果這個清單未包含您要產生程式碼的語言，您可以建立自訂語言程式碼產生器。如需簡單範例，請參閱「建構自訂產生器」程式碼研究室，該研究室會建立 JSON 語言程式碼產生器。如需更複雜的範例，請參閱 JavaScript 程式碼產生器。請注意，您也需要為要使用的任何內建區塊編寫區塊程式碼產生器。
區塊程式碼產生器
每個區塊都會負責產生自己的程式碼。建立區塊時，您需要為每種要支援的語言編寫個別的區塊程式碼產生器。
區塊程式碼產生器是會將該區塊的程式碼以字串形式傳回的函式。舉例來說，比較兩個數字的區塊會傳回 'a < b' 格式的字串，而代表 if 陳述式的區塊會傳回 'if (...) {\n...\n};\n' 格式的字串。
import {javascriptGenerator} from 'blockly/javascript';
import {pythonGenerator} from 'blockly/python';
// Write block-code generators for JavaScript and Python.
javascriptGenerator.forBlock['my_custom_block'] = function(block, generator) { /* ... */ };
pythonGenerator.forBlock['my_custom_block'] = function(block, generator) { /* ... */ };
語言代碼產生器會呼叫區塊程式碼產生器。
詳情請參閱「區塊程式碼產生器」。
產生及執行程式碼
應用程式隨時可以產生代碼。舉例來說，當使用者點選按鈕或每次變更時，系統就可能會產生程式碼。
產生程式碼後，您需要瞭解如何執行程式碼。決定如何執行這項操作的做法非常特定於應用程式，且超出 Blockly 的範圍。
詳情請參閱「產生及執行程式碼」。
除非另有註明，否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權，程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間：2025-07-25 (世界標準時間)。
[null,null,["上次更新時間：2025-07-25 (世界標準時間)。"],[[["\u003cp\u003eCode generation transforms Blockly blocks into executable code strings in various programming languages like JavaScript, Python, Lua, Dart, and PHP.\u003c/p\u003e\n"],["\u003cp\u003eBlockly offers built-in code generators for these languages, accessible through modules, Unpkg, or local scripts, along with the option to create custom generators.\u003c/p\u003e\n"],["\u003cp\u003eGenerating code involves defining how individual blocks translate to code in each target language, including handling fields, inner blocks, and code concatenation.\u003c/p\u003e\n"],["\u003cp\u003eCode generation can be triggered on demand or continuously as the user interacts with the blocks, allowing for dynamic updates and code execution.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers can add preamble or postscript code to the generated output for including external definitions or initiating specific behaviors.\u003c/p\u003e\n"]]],["Code generation transforms visual blocks into executable code strings. A code generator handles language-specific formatting. Blockly offers built-in generators for JavaScript, Python, Lua, Dart, and PHP, accessible via modules, Unpkg, or local scripts. Custom generators are also supported. Each block's code generation rules must be defined per language. Generation occurs on demand or continuously via event listeners. Optional preamble/postscript code can be added. Execution of generated code is application-specific, and for JavaScript, JSInterpreter is suggested.\n"],null,["# Code generation is the process of turning the blocks on a workspace into a\nstring of code that can be executed.\n\nCode generation is extremely important, because it is what allows your blocks to\nactually *do* things, like evaluate arithmetic expressions, move a character\nthrough a maze, or configure an online shop!\n\nYou can't \"run\" blocks directly. Instead you generate code strings, and then\nexecute those.\n\nLanguage code generators\n------------------------\n\nTo generate code, you have to pick what text-based language you want to\ngenerate. This is because each language has its own code generator.\n\nA **language code generator** (commonly called a **code generator**) is a class\nthat handles the rules for generating code that are specific to a given\nlanguage, but not specific to an individual block. For example, it handles\nthings like formatting comments, indenting statements, and quoting strings.\n\nBlockly provides 5 built-in code generators:\n\n- JavaScript ES5\n- Python 3\n- Lua 5.1\n- Dart 2\n- PHP 7\n\nIf this list doesn't include the language you want to generate code for, you can\ncreate a custom language code generator. For a simple example, see the [Build a\ncustom generator](https://blocklycodelabs.dev/codelabs/custom-generator/index.html?index=..%2F..index#0) codelab, which creates a JSON language\ncode generator. For a more complex example, see the [JavaScript code\ngenerator](https://github.com/google/blockly/blob/master/generators/javascript/javascript_generator.ts). Note that you also need to write block-code\ngenerators for any built-in blocks that you want to use.\n\nBlock-code generators\n---------------------\n\nEach block is responsible for generating its own code. When you create a block,\nyou need to write a separate block-code generator for each language you want to\nsupport.\n\nA **block-code generator** is a function that returns the code for that block as\na string. For example, a block that compares two numbers returns a string of the\nform `'a \u003c b'` and a block that represents an if statement returns a string of\nthe form `'if (...) {\\n...\\n};\\n'`. \n\n import {javascriptGenerator} from 'blockly/javascript';\n import {pythonGenerator} from 'blockly/python';\n\n // Write block-code generators for JavaScript and Python.\n javascriptGenerator.forBlock['my_custom_block'] = function(block, generator) { /* ... */ };\n pythonGenerator.forBlock['my_custom_block'] = function(block, generator) { /* ... */ };\n\nBlock-code generators are called by language code generators.\n\nFor more information, see [Block-code\ngenerators](/blockly/guides/create-custom-blocks/code-generation/block-code).\n\nGenerate and run code\n---------------------\n\nYour application can generate code at any time. For example, it might generate\ncode when the end-user clicks a button or every time the user makes a change.\n\nAfter you've generated the code, you need to figure out how to execute it.\nDeciding how to execute it is very application-specific, and outside the scope\nof Blockly.\n\nFor more information, see [Generate and run\ncode](/blockly/guides/app-integration/run-code)."]]
