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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
|
---
title: export
slug: Web/JavaScript/Referencia/Sentencies/export
translation_of: Web/JavaScript/Reference/Statements/export
---
<div>{{jsSidebar("Statements")}}</div>
<p>La<strong> </strong>sentència <strong>export</strong> s'utilitza per exportar funcions, objectes o valors primitius d'un fitxer donat (o <em>mòdul</em>) per a que els puguin fer servir altres programes amb la sentència {{jsxref("Statements/import", "import")}}.</p>
<p>Els mòduls exportats estan sempre {{jsxref("Strict_mode","strict mode", "", 1)}} tan si es declaren així com si no. La sentència export no es pot fer servir en mòduls incrustats (embedded).</p>
<h2 id="Sintaxi">Sintaxi</h2>
<pre class="syntaxbox notranslate">export <em>nom1</em>, <em>nom2</em>, ..., <em>nomN</em>;
export default <em>nom1</em> </pre>
<dl>
<dt><code>nomN</code></dt>
<dd>Propietat, funció, o objecte que s'ha d'exportar (de manera que es pot importar a través de <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code> en un altre script).</dd>
</dl>
<h2 id="Descripció">Descripció</h2>
<p>Hi ha dos tipus diferents d'export:</p>
<ul>
<li>Exportacions nominals (una o més per mòdul):
<pre class="brush: js notranslate">export myFunction; // exporta una funció declarada anteriorment
export const foo = Math.sqrt(2); // exporta una constant
export let <var>name1</var>, <var>name2</var>, …, <var>nameN</var>;
export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>;
export function functionName(){...}
export class ClassName {...}</pre>
</li>
<li>Exportacions per defecte (una per mòdul):
<pre class="notranslate">export default <em>expression</em>;
export default function (…) { … } // també class, function*
export default function name1(…) { … } // també class, function*
export { <var>name1</var> as default, … };</pre>
</li>
</ul>
<p>Les exportacions amb nom són útils per exportar diversos valors. Durant la importació, un serà capaç d'utilitzar el mateix nom per referir-se al valor corresponent.</p>
<p>Sobre la exportació per defecte, només pot haver-n'hi una per mòdul. Una exportació per defecte pot ser una funció, una classe un objecte o qualsevol altra cosa. Aquest valor es considerarà el principal valor exportat, ja que serà el més fàcil d'importar.</p>
<h2 id="Exemples">Exemples</h2>
<h3 id="Usant_les_exportacions_nominals">Usant les exportacions nominals</h3>
<p>En el mòdul podem fer servir el codi següent:</p>
<pre class="brush: js notranslate">// "modul.js"
export function cub(x) {
return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export foo;
</pre>
<p>Així, en un altre mòdul podem tenir:</p>
<pre class="brush: js notranslate">import { cub, foo } from 'modul.js';
console.log(cub(3)); // 9
console.log(foo); // 4.555806215962888</pre>
<h3 id="Usant_lexportació_per_defecte">Usant l'exportació per defecte</h3>
<p>Si volem exportar un únic valor o tenir un valor per defecte per al nostre mòdul podem fer::</p>
<pre class="brush: js notranslate">// "modul.js"
var function cub(x) {
return x * x * x;
}
export default cub;</pre>
<p>Així, en un altre mòdul podem importar directament:</p>
<pre class="brush: js notranslate">import laFuncio from 'modul';
console.log(laFuncio(3)); // 9
</pre>
<h2 id="Especificacions">Especificacions</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificació</th>
<th scope="col">Estat</th>
<th scope="col">Comentaris</th>
</tr>
<tr>
<td>{{SpecName('ES6', '#sec-imports', 'Imports')}}</td>
<td>{{Spec2('ES6')}}</td>
<td>Definició inicial</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilitat_amb_navegadors">Compatibilitat amb navegadors</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Suport bàsic</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android</th>
<th>Chrome per Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suport bàsic</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Vegeu_també">Vegeu també</h2>
<ul>
<li>{{jsxref("Statements/import", "import")}}</li>
<li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post per Jason Orendorff</li>
<li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li>
</ul>
|
