aboutsummaryrefslogtreecommitdiff
path: root/files/pt-br/web/javascript/reference/global_objects/json/stringify/index.html
blob: ca3138e1bfcd374f1992dcc35fcef192e902302f (plain)
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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
---
title: JSON.stringify()
slug: Web/JavaScript/Reference/Global_Objects/JSON/stringify
translation_of: Web/JavaScript/Reference/Global_Objects/JSON/stringify
---
<div>{{JSRef("Global_Objects", "JSON")}}</div>

<h2 id="Summary" name="Summary">Resumo</h2>

<p>O método <strong><code>JSON.stringify()</code></strong> converte valores em javascript para uma String  JSON. Esses valores podem ser substituidos especificando a função <em>replacer</em>, ou incluindo somente as propriedades específicas, quando o array do replacer for especificado.</p>

<h2 id="Syntax" name="Syntax">Sintaxe</h2>

<pre class="syntaxbox notranslate"><code>JSON.stringify(<var>valor</var>[, <var>replacer</var>[, espaço]])</code></pre>

<h3 id="Parameters" name="Parameters">Parâmetros</h3>

<dl>
 <dt><code>valor</code></dt>
 <dd>O valor a ser convertido para uma string JSON.</dd>
 <dt><code>replacer</code> {{optional_inline}}</dt>
 <dd>Uma função que altera o comportamento do processo de transformação em string, ou um array de objetos {{jsxref("String")}} e {{jsxref("Number")}} que servem como uma lista branca para selecionar as propriedades do objeto valor a ser incluído na string JSON. Se este valor for nulo ou não fornecido, todas as propriedades do objeto são incluídas na string JSON resultante.</dd>
 <dt><code>espaço</code> {{optional_inline}}</dt>
 <dd>Um objeto {{jsxref("String")}} ou {{jsxref("Number")}} que é usado para inserir espaço em branco na saída da string JSON para propósito de legibilidade. Se isto for um <code>Number</code>, indica o número de caracteres espaço para usar como espaço em branco; este número é limitado em 10 se for maior que isso. Valores menores que 1 indicam que nenhum espaço deve ser usado. Se isto for uma <code>String</code>, a string (ou os primeiros 10 caracteres da string, se for maior que isso) é usado como espaço em branco. Se esse parâmetro não for fornecido (ou for null), nenhum espaço em branco é usado.</dd>
</dl>

<h2 id="Description" name="Description">Descrição</h2>

<p><code>JSON.stringify()</code> converte um valor para uma notação JSON que o representa:</p>

<ul>
 <li>Se o valor tiver um método <code>toJSON()</code>, é responsável por definir quais dados serão serializados.</li>
 <li>{{jsxref("Boolean")}}, {{jsxref("Number")}}, and {{jsxref("String")}} os objetos são convertidos para os valores primitivos correspondentes durante a stringificação, de acordo com a semântica de conversão.</li>
 <li>Se {{jsxref("undefined")}}, uma função, ou um symbol é encontrado durante a conversão é omitido (quando é encontrado em um objeto) ou censurado para {{jsxref("null")}} (quando é encontrado em um Array). <code>JSON.stringify</code> pode também somente retornar <code>undefined</code> ao passar valores puros como <code>JSON.stringify(function(){})</code> ou <code>JSON.stringify(undefined)</code>.</li>
 <li>Todas as propriedades com chave de símbolo serão completamente ignoradas, mesmo quando usar a função  <code>replacer</code>.</li>
 <li>Propriedades não enumeráveis serão ignoradas.</li>
</ul>

<pre class="brush: js notranslate">JSON.stringify({});                  // '{}'
JSON.stringify(true);                // 'true'
JSON.stringify('foo');               // '"foo"'
JSON.stringify([1, 'false', false]); // '[1,"false",false]'
JSON.stringify({ x: 5 });            // '{"x":5}'

JSON.stringify({ x: 5, y: 6 });
// '{"x":5,"y":6}' or '{"y":6,"x":5}'
JSON.stringify([new Number(1), new String('false'), new Boolean(false)]);
// '[1,"false",false]'

// Symbols:
JSON.stringify({ x: undefined, y: Object, z: Symbol('') });
// '{}'
JSON.stringify({ [Symbol('foo')]: 'foo' });
// '{}'
JSON.stringify({ [Symbol.for('foo')]: 'foo' }, [Symbol.for('foo')]);
// '{}'
JSON.stringify({ [Symbol.for('foo')]: 'foo' }, function(k, v) {
  if (typeof k === 'symbol') {
    return 'a symbol';
  }
});
// '{}'
</pre>

<h3 id="O_parâmetro_replacer_parameter">O parâmetro <code>replacer</code> parameter</h3>

<p dir="ltr" id="tw-target-text">O parâmetro <kbd>replacer</kbd> pode ser uma função ou uma matriz. Como função, são necessários dois parâmetros, a <kbd>chave</kbd> e os valores que estão sendo especificados. O objeto no qual a <kbd>chave</kbd> foi encontrada é fornecido como substituto desse parâmetro. Inicialmente, ele é chamado com uma chave vazia que representa o objeto que está sendo codificado e, em seguida, é chamado para cada propriedade no <kbd>objeto</kbd> ou matriz que está sendo codificada. Ele deve retornar o valor que deve ser adicionado à cadeia JSON, da seguinte maneira:</p>

<ul>
 <li>Se você retornar um {{jsxref("Number")}}, a string correspondente a esse número é usada como o valor da propriedade quando adicionada à sequência JSON.</li>
 <li>If you return a {{jsxref("String")}}, that string is used as the property's value when adding it to the JSON string.</li>
 <li>If you return a {{jsxref("Boolean")}}, "true" or "false" is used as the property's value, as appropriate, when adding it to the JSON string.</li>
 <li>If you return any other object, the object is recursively stringified into the JSON string, calling the <code>replacer</code> function on each property, unless the object is a function, in which case nothing is added to the JSON string.</li>
 <li>If you return <code>undefined</code>, the property is not included in the output JSON string. </li>
</ul>

<div class="blockIndicator note">
<p><strong>Nota: </strong>Você não pode usar a função <code>replacer</code> para remover valoeres em uma <code>array</code>. Se você retornar <code>undefined</code><code>null</code> será usado no lugar.</p>
</div>

<h4 id="Exemplo_de_uma_função">Exemplo de uma função</h4>

<pre class="brush: js notranslate">function <span style="font-size: 1rem;">replacer</span><span style="font-size: 1rem;">(key, value) {</span>
  if (typeof value === "string") {
    return undefined;
  }
  return value;
}

var foo = {fundação: "Mozilla", modelo: "caixa", semana: 45, transporte: "carro", mês: 7};
var jsonString = JSON.stringify(foo, replacer);
</pre>

<p>O resultado do JSON é:  <code>{"semana":45,"mês":7}</code>.</p>

<h4 id="Example_of_using_replacer_parameter" name="Example_of_using_replacer_parameter">Exemplo em uma array</h4>

<p>Se <code>replacer</code> é usado em uma array, os valores da array indicam os nomes das propriedades no objeto, que devem ser incluídas na sequência JSON resultante.</p>

<pre class="brush: js notranslate">JSON.stringify(foo, ['week', 'month']);
// '{"week":45,"month":7}', only keep "week" and "month" properties
</pre>

<h3 id="space_argument" name="space_argument">O argumento <code>space</code> </h3>

<p>O argumento <code>space</code> O argumento pode ser usado para controlar o espaçamento na sequência final. Se for um número, os níveis sucessivos na stringficação serão recuados por esse número de caracteres de espaço (até 10). Se for uma sequência, os níveis sucessivos serão recuados por essa sequência (ou pelos dez primeiros caracteres).</p>

<pre class="brush: js notranslate">JSON.stringify({ a: 2 }, null, ' ');
// '{
//  "a": 2
// }'
</pre>

<p>O uso de um caractere de tabulação imita a aparência padrão de impressão pretty-print.</p>

<pre class="brush: js notranslate">JSON.stringify({ uno: 1, dos: 2 }, null, '\t');
// r:
// '{
//     "uno": 1,
//     "dos": 2
// }'
</pre>

<h3 id="toJSON_behavior" name="toJSON_behavior">Comportamento de <code>toJSON()</code></h3>

<p>Se um objeto sendo stringificado tiver uma propriedade denominada <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">toJSON()</span></font> cujo valor é uma função, o método <code>toJSON()</code> personaliza o comportamento da stringificação JSON, em vez de o objeto ser serializado, o valor retornado pelo método <code>toJSON()</code> quando chamado será serializado. Por exemplo:</p>

<pre class="brush: js notranslate">var obj = {
  foo: 'foo',
  toJSON: function() {
    return 'bar';
  }
};
JSON.stringify(obj);        // '"bar"'
JSON.stringify({ x: obj }); // '{"x":"bar"}'
</pre>

<h3 id="Example_of_using_JSON.stringify_with_localStorage" name="Example_of_using_JSON.stringify_with_localStorage">Examplo de uso de <code>JSON.stringify()</code> com <code>localStorage</code></h3>

<p>No caso em que você deseja armazenar um objeto criado por seu usuário e permitir que ele seja restaurado mesmo após o fechamento do navegador, o exemplo a seguir é um modelo para a aplicabilidade de <code>JSON.stringify()</code>:</p>

<div class="warning">
<p>As funções não são um tipo de dados JSON válido, portanto, elas não funcionarão. Também alguns objetos como {{jsxref("Date")}} será uma string depois {{jsxref("JSON.parse()")}}.</p>
</div>

<pre class="brush: js notranslate">// Criando um exemplo em JSON
var seção = {
  'telas': [],
  'estado': true
};
session.screens.push({ 'nome': 'telaA', 'largura': 450, 'altura': 250 });
session.screens.push({ 'nome': 'telaB', 'largura': 650, 'altura': 350 });
session.screens.push({ 'nome': 'telaC', 'largura': 750, 'altura': 120 });
session.screens.push({ 'nome': 'telaD', 'largura': 250, 'altura': 60 });
session.screens.push({ 'nome': 'telaE', 'largura': 390, 'altura': 120 });
session.screens.push({ 'nome': 'telaF', 'largura': 1240, 'altura': 650 });

// Convertendo a string JSON em JSON.stringify()
// Salvando com localStorage no nome da sessão
localStorage.setItem('seção', JSON.stringify(seção));

// Exemplo de como transformar a String gerada por meio de:
// JSON.stringify() e salva em localStorage no objeto JSON novamente
var seçãoRestaurada = JSON.parse(localStorage.getItem('seção'));

// Agora, a variável seçãoRestaurada contém o objeto que foi salvo
// no localStorage
console.log(seçãoRestaurada);
</pre>

<h2 id="Specifications" name="Specifications">Especificações </h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Status</th>
   <th scope="col">Comentário</th>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-15.12.3', 'JSON.stringify')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td>
    <p dir="ltr" id="tw-target-text">Definição inicial. Implementado em JavaScript 1.7.</p>
   </td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-json.stringify', 'JSON.stringify')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade em navegadores</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Navegador</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
   <td>{{CompatIE("8.0")}}</td>
   <td>{{CompatOpera("10.5")}}</td>
   <td>{{CompatSafari("4.0")}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome para Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>Baseado na <a class="external" href="http://kangax.github.com/es5-compat-table/">Kangax's compat table</a>.</p>

<h2 id="See_also" name="See_also">Veja também</h2>

<ul>
 <li>{{jsxref("JSON.parse()")}}</li>
</ul>