CoffeeScript en ligne - IDE, éditeur, compilateur, interpréteur

Comment utiliser le compilateur CoffeeScript en ligne

1. Écrivez ou collez du CoffeeScript dans l'éditeur. Réinitialiser l'exemple rétablit le code de départ avec des fonctions, une compréhension et une petite hiérarchie de classes.
2. Appuyez sur Exécuter ou utilisez Ctrl + Entrée (⌘ + Entrée sur Mac).
3. Le compilateur officiel de CoffeeScript transforme votre code en JavaScript. En cas d'erreur de syntaxe, le message indique la ligne et la colonne, et rien ne s'exécute.
4. Si la compilation réussit, le JavaScript s'exécute dans le moteur JavaScript de votre navigateur. La sortie de console.log apparaît dans le panneau Sortie, les objets et les tableaux étant affichés en JSON mis en forme. Ouvrez JavaScript généré sous la sortie pour voir le code compilé.
5. Choisissez une limite de temps de 5, 15 ou 60 secondes, ou appuyez sur Arrêter pour interrompre une exécution plus tôt.

Utilisez Copier ou main.coffee pour enregistrer votre source. Le bouton de disposition alterne entre des volets côte à côte et empilés.

La compilation et l'exécution se font toutes deux dans un Web Worker de votre navigateur, et votre code n'est jamais envoyé à un serveur. L'éditeur enregistre automatiquement votre dernier code dans votre navigateur, séparément pour chaque compilateur.

À propos de CoffeeScript 2

CoffeeScript est un petit langage qui se compile en JavaScript. Sa syntaxe s'inspire de Ruby et de Python : indentation au lieu d'accolades, parenthèses facultatives, -> pour les fonctions et retours implicites. Plusieurs de ses idées, comme les fonctions fléchées, les classes, la déstructuration et l'interpolation de chaînes, sont ensuite devenues du JavaScript standard.

Cette page utilise CoffeeScript 2.7 en mode bare, de sorte que la sortie n'est pas enveloppée dans une fonction supplémentaire. CoffeeScript 2 génère du code ES2015+ moderne. Ses classes deviennent des classes JavaScript, => devient une fonction fléchée, et toute fonction qui contient await devient une fonction async.

Ce qui est pris en charge

• Le langage CoffeeScript 2 complet : classes avec extends et super, raccourci @, interpolation de chaînes avec "#{...}", intervalles comme [1..5], déstructuration, splats, opérateur d'existence ? et async/await.
• Les objets natifs standard de JavaScript comme Math, JSON, les méthodes de Array et Promise.

Limites :

• Pas de DOM : le code s'exécute dans un worker, donc document et window ne sont pas disponibles.
• Pas de require, d'import ni de paquets npm, et aucune API Node.js.
• Pas de zone de saisie. Définissez vos données de test dans le code.

Exemple pas à pas : compréhensions et @

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) dans le constructeur stocke l'argument sous la forme this.owner. Le callback utilise =>, donc @items désigne toujours le panier. Avec une flèche fine ->, il désignerait autre chose et l'appel échouerait. Ouvrez JavaScript généré pour voir comment la compréhension devient une boucle et la classe une classe ES.

Pièges courants

• Les espaces comptent. L'indentation définit les blocs, donc une ligne mal alignée change le sens ou empêche la compilation.
• Les retours implicites. Une fonction renvoie la valeur de sa dernière expression. Une boucle placée à la fin d'une fonction rassemble ses résultats dans un tableau. Ajoutez un return explicite si vous ne le souhaitez pas.
• in ou of. for x in array parcourt les valeurs, tandis que for key, value of object parcourt les propriétés. C'est l'inverse de ce qu'un développeur JavaScript pourrait attendre.
• Les compréhensions demandent des parenthèses quand vous les affectez ou les affichez. Sans elles, evens = n for n in list affecte tour à tour chaque élément à evens, et vous obtenez donc le dernier élément au lieu d'un tableau.
• Pas de var ni de let. Affecter une valeur à un nom qui existe déjà dans une portée extérieure met à jour cette variable au lieu d'en créer une nouvelle.
• is, isnt, and, or et not sont des alias, et == se compile en l'opérateur strict ===.

CoffeeScript ou TypeScript aujourd'hui ?

Pour les nouveaux projets, la plupart des équipes choisissent TypeScript ou JavaScript moderne, car ils offrent un typage statique et une prise en charge plus large par les éditeurs et les bibliothèques. CoffeeScript reste utile pour maintenir des bases de code existantes, comme d'anciennes applications Ruby on Rails, et pour des scripts rapides et concis. Lors d'une migration, le JavaScript généré est un bon point de départ. Mettez-le en forme avec le Formateur et minificateur JavaScript, ou essayez le résultat dans le Compilateur TypeScript en ligne.

Questions fréquentes

Puis-je convertir du CoffeeScript en JavaScript ici ?

Oui. Exécutez votre code, ouvrez JavaScript généré et copiez la sortie. Elle est produite par le compilateur officiel CoffeeScript 2.7 en mode bare.

Pourquoi ma fonction renvoie-t-elle un tableau inattendu ?

À cause des retours implicites. Si une boucle est la dernière expression d'une fonction, ses résultats sont rassemblés et renvoyés. Terminez la fonction par return ou par une autre valeur pour l'éviter.

Où puis-je exécuter directement le JavaScript ?

Utilisez le Compilateur JavaScript en ligne, ou parcourez tous les compilateurs en ligne.

Mis à jour 2026-10-17