CoffeeScript online - IDE, Editor, Compiler, Interpreter

So nutzen Sie den Online-CoffeeScript-Compiler

Schreiben Sie CoffeeScript in den Editor oder fügen Sie es dort ein. Mit Beispiel zurücksetzen stellen Sie den Startcode mit Funktionen, einer Comprehension und einer kleinen Klassenhierarchie wieder her.
Drücken Sie Ausführen oder Strg + Enter (⌘ + Enter auf dem Mac).
Der offizielle CoffeeScript-Compiler wandelt Ihren Code in JavaScript um. Bei einem Syntaxfehler nennt die Meldung Zeile und Spalte, und es wird nichts ausgeführt.
Läuft die Kompilierung erfolgreich durch, wird das JavaScript in der JavaScript-Engine Ihres Browsers ausgeführt. Ausgaben von console.log erscheinen im Bereich Ausgabe, wobei Objekte und Arrays als formatiertes JSON dargestellt werden. Öffnen Sie unter der Ausgabe Generiertes JavaScript, um den kompilierten Code zu sehen.
Wählen Sie ein Zeitlimit von 5, 15 oder 60 Sekunden oder drücken Sie Stopp, um einen Lauf vorzeitig zu beenden.

Mit Kopieren oder main.coffee sichern Sie Ihren Quellcode. Die Layout-Schaltfläche wechselt zwischen nebeneinander und untereinander angeordneten Bereichen.

Kompilieren und Ausführen laufen beide in einem Web Worker in Ihrem Browser, und Ihr Code wird nie an einen Server gesendet. Der Editor speichert Ihren letzten Code automatisch in Ihrem Browser, getrennt für jeden Compiler.

Über CoffeeScript 2

CoffeeScript ist eine kleine Sprache, die zu JavaScript kompiliert wird. Ihre Syntax ist von Ruby und Python inspiriert: Einrückung statt geschweifter Klammern, optionale runde Klammern, -> für Funktionen und implizite Rückgabewerte. Mehrere ihrer Ideen, etwa Arrow-Funktionen, Klassen, Destrukturierung und String-Interpolation, wurden später zum JavaScript-Standard.

Diese Seite verwendet CoffeeScript 2.7 im Bare-Modus, sodass die Ausgabe nicht in eine zusätzliche Funktion eingepackt wird. CoffeeScript 2 erzeugt modernen ES2015+-Code. Seine Klassen werden zu JavaScript-Klassen, => wird zu einer Arrow-Funktion, und jede Funktion, die await enthält, wird zu einer async-Funktion.

Was unterstützt wird

Die vollständige Sprache CoffeeScript 2: Klassen mit extends und super, die @-Kurzschreibweise, String-Interpolation mit "#{...}", Bereiche wie [1..5], Destrukturierung, Splats, der Existenzoperator ? und async/await.
Standardmäßige JavaScript-Built-ins wie Math, JSON, Array-Methoden und Promise.

Einschränkungen:

Kein DOM: Der Code läuft in einem Worker, daher sind document und window nicht verfügbar.
Kein require, kein import, keine npm-Pakete und keine Node.js-APIs.
Kein Eingabefeld. Definieren Sie Ihre Testdaten im Code.

Beispiel: Comprehensions und @

evens = (n for n in [1..10] when n % 2 is 0)
console.log evens                    # [2, 4, 6, 8, 10]

class Basket
  constructor: (@owner) ->
    @items = []
  addAll: (list) ->
    list.forEach (item) => @items.push item
    this

basket = new Basket('Ada').addAll ['tea', 'milk']
console.log "#{basket.owner} has #{basket.items.length} items"

(@owner) im Konstruktor speichert das Argument als this.owner. Der Callback verwendet =>, sodass sich @items weiterhin auf den Korb (Basket) bezieht. Mit dem dünnen Pfeil -> würde es sich auf etwas anderes beziehen, und der Aufruf würde fehlschlagen. Öffnen Sie Generiertes JavaScript, um zu sehen, wie aus der Comprehension eine Schleife und aus der Klasse eine ES-Klasse wird.

Häufige Stolperfallen

Leerraum ist bedeutsam. Die Einrückung legt Blöcke fest, daher ändert eine falsch ausgerichtete Zeile die Bedeutung oder lässt sich nicht kompilieren.
Implizite Rückgabewerte. Eine Funktion gibt den Wert ihres letzten Ausdrucks zurück. Eine Schleife am Ende einer Funktion sammelt ihre Ergebnisse in einem Array. Fügen Sie ein explizites return hinzu, wenn Sie das nicht möchten.
in vs. of. for x in array durchläuft Werte, während for key, value of object Eigenschaften durchläuft. Das ist das Gegenteil dessen, was ein JavaScript-Entwickler erwarten könnte.
Comprehensions brauchen runde Klammern, wenn Sie sie zuweisen oder ausgeben. Ohne sie weist evens = n for n in list der Reihe nach jedes Element evens zu, sodass Sie am Ende das letzte Element statt eines Arrays erhalten.
Kein var oder let. Wenn Sie einem Namen etwas zuweisen, der in einem äußeren Gültigkeitsbereich schon existiert, wird diese Variable aktualisiert, statt eine neue anzulegen.
is, isnt, and, or und not sind Aliase, und == wird zum strikten === kompiliert.

CoffeeScript oder TypeScript heute?

Für neue Projekte wählen die meisten Teams TypeScript oder modernes JavaScript, weil sie statische Typen sowie breitere Unterstützung in Editoren und Bibliotheken bieten. CoffeeScript ist weiterhin nützlich, um bestehende Codebasen zu pflegen, etwa ältere Ruby-on-Rails-Anwendungen, und für schnelle, knappe Skripte. Bei einer Migration ist das erzeugte JavaScript ein guter Ausgangspunkt. Räumen Sie es mit dem JavaScript-Formatter & Minifier auf oder probieren Sie das Ergebnis im Online-TypeScript-Compiler aus.

Häufig gestellte Fragen

Kann ich CoffeeScript hier in JavaScript umwandeln?

Ja. Führen Sie Ihren Code aus, öffnen Sie Generiertes JavaScript und kopieren Sie die Ausgabe. Sie wird vom offiziellen CoffeeScript-2.7-Compiler im Bare-Modus erzeugt.

Warum gibt meine Funktion ein Array zurück, das ich nicht erwartet habe?

Wegen der impliziten Rückgabewerte. Ist eine Schleife der letzte Ausdruck einer Funktion, werden ihre Ergebnisse gesammelt und zurückgegeben. Beenden Sie die Funktion mit return oder einem anderen Wert, um das zu vermeiden.

Wo kann ich das JavaScript direkt ausführen?

Nutzen Sie den Online-JavaScript-Compiler oder stöbern Sie in allen Online-Compilern.

Aktualisiert 2026-10-17

Alle Tools