files/fr/web/javascript/reference/opérateurs/tube/index.html


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

---
title: Tube
slug: Web/JavaScript/Reference/Opérateurs/Tube
tags:
  - Experimental
  - JavaScript
  - Opérateur
  - Reference
translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator
---
<div>{{jsSidebar("Operators")}} {{SeeCompatTable}}</div>

<p>L'opérateur expérimental tube (ou <em>pipeline</em> en anglais) <strong><code>|&gt;</code></strong> (actuellement au niveau 1 des propositions) permet de créer des chaînes d'appel de fonctions de façon lisible. En fait, cet opérateur fournit un sucre syntaxique pour les appels de fonction avec un seul argument. On pourrait donc écrire :</p>

<pre class="brush: js">let url = "%21%" |&gt; decodeURI;</pre>

<p>qui correspond exactement à :</p>

<pre class="brush: js">let url = decodeURI("%21%");</pre>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="syntaxbox">expression |&gt; function</pre>

<p>La valeur de <code>expression</code> est passé à <code>function</code> comme unique paramètre.</p>

<h2 id="Exemples">Exemples</h2>

<h3 id="Enchaîner_des_appels_de_fonction">Enchaîner des appels de fonction</h3>

<p>L'opérateur tube peut améliorer la lisibilité lorsqu'on enchaîne plusieurs fonctions.</p>

<pre class="brush: js">const doubler = (n) =&gt; n * 2;
const incrementer = (n) =&gt; n + 1;

// Sans l'opérateur tube
doubler(incrementer(doubler(10))); // 42

// Avec l'opérateur tube
10 |&gt; doubler |&gt; incrementer |&gt; doubler; // 42
</pre>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="https://tc39.github.io/proposal-pipeline-operator/#sec-intro">Brouillon de spécification pour la proposition de l'opérateur tube</a></td>
   <td>Niveau 1</td>
   <td>Ne fait actuellement pas partie de la spécification ECMAScript.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>

<p>{{Compat("javascript.operators.pipeline")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="https://github.com/tc39/proposals">Les propositions au TC39</a></li>
</ul>