danielhagnoul

Traitement d'un template ES2015 pour améliorer la présentation des variables.

Noter ce billet

par

, 07/09/2015 à 10h49 (1281 Affichages)

La fonction logVars traite le contenu d'un ou de plusieurs objets anonymes.

Auteur : Dr. Axel Rauschmayer
Source : Logging variables via an ES6 tagged template

Exemple d'utilisation avec console.log() :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <style>
 
  </style>
</head>
<body>
 
  <h1>Voir la console, touche F12</h1>
 
  <script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
  <script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
  <script type="module">
    /*
     * Traitement d'un template ES2015 pour améliorer la présentation des variables.
     * La fonction traite le contenu d'un ou de plusieurs objets anonymes.
     * Auteur : Dr. Axel Rauschmayer
     * Source : Logging variables via an ES6 tagged template
     *   "http://www.2ality.com/2015/08/logging-variables-tagged-template.html"
     * Exemple d'utilisation avec console.log(), ci-dessous.
     */
    function logVars( templateStrings, ...substitutions ){
      let result = templateStrings[ 0 ];
 
      for ( let [ i, obj ] of substitutions.entries() ){
 
        let propKeys = Object.keys( obj );
 
        for ( let [ j, propKey ] of propKeys.entries() ){
          if ( j > 0 ){
            result += ", ";
          }
 
          result += propKey + " = " + obj[ propKey ];
        }
 
        result += templateStrings[ i + 1 ];
      }
 
      return result;
    }
 
    let
      poids = 82,
      hauteur = 179,
      joyeux = true,
      prenom = "Pierre",
      nom = "Dupondlajoie",
      tab = [ "Un", "Deux", "Trois" ],
      map = new Map([
        [ true, "yes" ],
        [ false, "no" ]
      ]);
 
    // logVars améliore aussi la présentation d'un Array 
    console.log( logVars`
      Individu : ${ { prenom, nom } } ;
      caractéristiques : ${ { poids, hauteur, joyeux } } ;
      tableau : ${ tab }
    ` );
 
    /*
      Individu : prenom = Pierre, nom = Dupondlajoie ;
      caractéristiques : poids = 82, hauteur = 179, joyeux = true ;
      tableau : 0 = Un, 1 = Deux, 2 = Trois
    */
 
    // Map : la meilleure solution est de le convertir en array puis en JSON
    console.log( "map :", JSON.stringify( [ ...map ] ) );
 
    // map : [[true,"yes"],[false,"no"]]
  </script>
</body>
</html>