mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-06-09 15:34:05 +08:00
260 lines
22 KiB
HTML
260 lines
22 KiB
HTML
<article id="wikiArticle">
|
||
<div></div>
|
||
<p><code><strong>toLocaleString()</strong></code> 返回一个字符串表示数组中的元素。数组中的元素将使用各自的 <code>toLocaleString</code> 方法转成字符串，这些字符串将使用一个特定语言环境的字符串（例如一个逗号 ","）隔开。</p>
|
||
<div><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/array-tolocalestring.html" width="100%"></iframe></div>
|
||
<h2 id="Syntax" name="Syntax">语法</h2>
|
||
<pre><code class="language-javascript"><font face="consolas, Liberation Mono, courier, monospace">arr.toLocaleString([locales[,options]]);</font></code></pre>
|
||
<h3 id="参数"><font face="consolas, Liberation Mono, courier, monospace">参数</font></h3>
|
||
<dl>
|
||
<dt><code>locales</code> <span class="inlineIndicator optional optionalInline">可选</span></dt>
|
||
<dd>带有BCP 47语言标记的字符串或字符串数组，关于<code>locales</code>参数的形式与解释，请看<a href="Reference/Global_Objects/Intl" title="Intl 对象是 ECMAScript 国际化 API 的一个命名空间，它提供了精确的字符串对比、数字格式化，和日期时间格式化。Collator，NumberFormat 和 DateTimeFormat 对象的构造函数是 Intl 对象的属性。本页文档内容包括了这些属性，以及国际化使用的构造器和其他语言的方法等常见的功能。"><code>Intl</code></a>页面。</dd>
|
||
<dt><code>options</code> <span class="inlineIndicator optional optionalInline">可选</span></dt>
|
||
<dd>一个可配置属性的对象，对于数字 <a href="Reference/Global_Objects/Number/toLocaleString" title="toLocaleString() 方法返回这个数字在特定语言环境下的表示字符串。"><code>Number.prototype.toLocaleString()</code></a>，对于日期<a href="Reference/Global_Objects/Date/toLocaleString" title="toLocaleString() 方法返回该日期对象的字符串，该字符串格式因不同语言而不同。新增的参数 locales 和 options 使程序能够指定使用哪种语言格式化规则，允许定制该方法的表现（behavior）。在旧版本浏览器中， locales 和 options 参数被忽略，使用的语言环境和返回的字符串格式是各自独立实现的。"><code>Date.prototype.toLocaleString()</code></a>.</dd>
|
||
</dl>
|
||
<h3 id="返回值"><font face="consolas, Liberation Mono, courier, monospace">返回值</font></h3>
|
||
<p>表示数组元素的字符串。</p>
|
||
<h2 id="示例">示例</h2>
|
||
<h3 id="使用locales和options">使用<code>locales</code>和<code>options</code></h3>
|
||
<p>数组中的元素将会使用各自的 toLocaleString 方法：</p>
|
||
<ul>
|
||
<li><code>Object</code>: <a href="Reference/Global_Objects/Object/toLocaleString" title="toLocaleString() 方法返回一个该对象的字符串表示。此方法被用于派生对象为了特定语言环境的目的（locale-specific purposes）而重载使用。"><code>Object.prototype.toLocaleString()</code></a></li>
|
||
<li><code>Number</code>: <a href="Reference/Global_Objects/Number/toLocaleString" title="toLocaleString() 方法返回这个数字在特定语言环境下的表示字符串。"><code>Number.prototype.toLocaleString()</code></a></li>
|
||
<li><code>Date</code>: <a href="Reference/Global_Objects/Date/toLocaleString" title="toLocaleString() 方法返回该日期对象的字符串，该字符串格式因不同语言而不同。新增的参数 locales 和 options 使程序能够指定使用哪种语言格式化规则，允许定制该方法的表现（behavior）。在旧版本浏览器中， locales 和 options 参数被忽略，使用的语言环境和返回的字符串格式是各自独立实现的。"><code>Date.prototype.toLocaleString()</code></a></li>
|
||
</ul>
|
||
<p>总是在<code>prices</code>数组中显示字符串和数字的货币符号：</p>
|
||
<pre><code class="language-javascript">var prices = ['￥7', 500, 8123, 12];
|
||
prices.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });
|
||
|
||
// "￥7,￥500,￥8,123,￥12"</code></pre>
|
||
<p>更多实例请看 <a href="Reference/Global_Objects/Intl" title="Intl 对象是 ECMAScript 国际化 API 的一个命名空间，它提供了精确的字符串对比、数字格式化，和日期时间格式化。Collator，NumberFormat 和 DateTimeFormat 对象的构造函数是 Intl 对象的属性。本页文档内容包括了这些属性，以及国际化使用的构造器和其他语言的方法等常见的功能。"><code>Intl</code></a>，<a href="Reference/Global_Objects/NumberFormat" title="Intl.NumberFormat是对语言敏感的格式化数字类的构造器类"><code>NumberFormat</code></a>和<a href="Reference/Global_Objects/DateTimeFormat" title="交互示例的源代码存储在 GitHub 资源库。如果你愿意分布交互示例，请复制https://github.com/mdn/interactive-examples，并向我们发送一个pull请求。"><code>DateTimeFormat</code></a>页面。</p>
|
||
<h2 id="Polyfill">Polyfill</h2>
|
||
<pre><code class="language-javascript">// https://tc39.github.io/ecma402/#sup-array.prototype.tolocalestring
|
||
if (!Array.prototype.toLocaleString) {
|
||
Object.defineProperty(Array.prototype, 'toLocaleString', {
|
||
value: function(locales, options) {
|
||
// 1. Let O be ? ToObject(this value).
|
||
if (this == null) {
|
||
throw new TypeError('"this" is null or not defined');
|
||
}
|
||
|
||
var a = Object(this);
|
||
|
||
// 2. Let len be ? ToLength(? Get(A, "length")).
|
||
var len = a.length >>> 0;
|
||
|
||
// 3. Let separator be the String value for the
|
||
// list-separator String appropriate for the
|
||
// host environment's current locale (this is
|
||
// derived in an implementation-defined way).
|
||
// NOTE: In this case, we will use a comma
|
||
var separator = ',';
|
||
|
||
// 4. If len is zero, return the empty String.
|
||
if (len === 0) {
|
||
return '';
|
||
}
|
||
|
||
// 5. Let firstElement be ? Get(A, "0").
|
||
var firstElement = a[0];
|
||
// 6. If firstElement is undefined or null, then
|
||
// a.Let R be the empty String.
|
||
// 7. Else,
|
||
// a. Let R be ?
|
||
// ToString(?
|
||
// Invoke(
|
||
// firstElement,
|
||
// "toLocaleString",
|
||
// « locales, options »
|
||
// )
|
||
// )
|
||
var r = firstElement == null ?
|
||
'' : firstElement.toLocaleString(locales, options);
|
||
|
||
// 8. Let k be 1.
|
||
var k = 1;
|
||
|
||
// 9. Repeat, while k < len
|
||
while (k < len) {
|
||
// a. Let S be a String value produced by
|
||
// concatenating R and separator.
|
||
var s = r + separator;
|
||
|
||
// b. Let nextElement be ? Get(A, ToString(k)).
|
||
var nextElement = a[k];
|
||
|
||
// c. If nextElement is undefined or null, then
|
||
// i. Let R be the empty String.
|
||
// d. Else,
|
||
// i. Let R be ?
|
||
// ToString(?
|
||
// Invoke(
|
||
// nextElement,
|
||
// "toLocaleString",
|
||
// « locales, options »
|
||
// )
|
||
// )
|
||
r = nextElement == null ?
|
||
'' : nextElement.toLocaleString(locales, options);
|
||
|
||
// e. Let R be a String value produced by
|
||
// concatenating S and R.
|
||
r = s + r;
|
||
|
||
// f. Increase k by 1.
|
||
k++;
|
||
}
|
||
|
||
// 10. Return R.
|
||
return r;
|
||
}
|
||
});
|
||
}
|
||
</code></pre>
|
||
<p>如果你需要支持真正不支持<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>的JavaScript引擎，最好不要对<code>Array.prototype</code>方法进行填充，因为你不能使它们不可枚举。</p>
|
||
<h2 id="规范">规范</h2>
|
||
<table class="standard-table">
|
||
<tbody>
|
||
<tr>
|
||
<th scope="col">Specification</th>
|
||
<th scope="col">Status</th>
|
||
<th scope="col">Comment</th>
|
||
</tr>
|
||
<tr>
|
||
<td><a class="external" href="https://tc39.github.io/ecma262/#sec-array.prototype.tolocalestring" hreflang="en" lang="en" rel="noopener">ECMAScript Latest Draft (ECMA-262)<br/><small lang="zh-CN">Array.prototype.toLocaleString</small></a></td>
|
||
<td><span class="spec-Draft">Draft</span></td>
|
||
<td>Initial definition was in ECMAScript 3.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><a class="external" href="https://tc39.github.io/ecma402/#sup-array.prototype.tolocalestring" hreflang="en" lang="en" rel="noopener">ECMAScript Internationalization API 4.0 (ECMA-402)<br/><small lang="zh-CN">Array.prototype.toLocaleString</small></a></td>
|
||
<td><span class="spec-Draft">Draft</span></td>
|
||
<td>This definition supersedes the definition provided in ECMA-262.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="浏览器兼容性">浏览器兼容性</h2>
|
||
<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data" rel="noopener">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
|
||
<p></p><div class="bc-data"><a class="bc-github-link external" href="https://github.com/mdn/browser-compat-data" rel="noopener">Update compatibility data on GitHub</a><table class="bc-table bc-table-js"><thead><tr class="bc-platforms"><td></td><th class="bc-platform-desktop" colspan="6"><span>Desktop</span></th><th class="bc-platform-mobile" colspan="7"><span>Mobile</span></th><th class="bc-platform-server" colspan="1"><span>Server</span></th></tr><tr class="bc-browsers"><td></td><th class="bc-browser-chrome"><span class="bc-head-txt-label bc-head-icon-chrome">Chrome</span></th><th class="bc-browser-edge"><span class="bc-head-txt-label bc-head-icon-edge">Edge</span></th><th class="bc-browser-firefox"><span class="bc-head-txt-label bc-head-icon-firefox">Firefox</span></th><th class="bc-browser-ie"><span class="bc-head-txt-label bc-head-icon-ie">Internet Explorer</span></th><th class="bc-browser-opera"><span class="bc-head-txt-label bc-head-icon-opera">Opera</span></th><th class="bc-browser-safari"><span class="bc-head-txt-label bc-head-icon-safari">Safari</span></th><th class="bc-browser-webview_android"><span class="bc-head-txt-label bc-head-icon-webview_android">Android webview</span></th><th class="bc-browser-chrome_android"><span class="bc-head-txt-label bc-head-icon-chrome_android">Chrome for Android</span></th><th class="bc-browser-edge_mobile"><span class="bc-head-txt-label bc-head-icon-edge_mobile">Edge Mobile</span></th><th class="bc-browser-firefox_android"><span class="bc-head-txt-label bc-head-icon-firefox_android">Firefox for Android</span></th><th class="bc-browser-opera_android"><span class="bc-head-txt-label bc-head-icon-opera_android">Opera for Android</span></th><th class="bc-browser-safari_ios"><span class="bc-head-txt-label bc-head-icon-safari_ios">Safari on iOS</span></th><th class="bc-browser-samsunginternet_android"><span class="bc-head-txt-label bc-head-icon-samsunginternet_android">Samsung Internet</span></th><th class="bc-browser-nodejs"><span class="bc-head-txt-label bc-head-icon-nodejs">Node.js</span></th></tr></thead><tbody><tr><th scope="row"><code>toLocaleString</code></th><td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
Yes</td><td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
12</td><td class="bc-supports-yes bc-browser-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
1</td><td class="bc-supports-yes bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
Yes</td><td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
Yes</td><td class="bc-supports-yes bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
Yes</td><td class="bc-supports-yes bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
Yes</td><td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
Yes</td><td class="bc-supports-yes bc-browser-edge_mobile"><span class="bc-browser-name">Edge Mobile</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
Yes</td><td class="bc-supports-yes bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
4</td><td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
Yes</td><td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
Yes</td><td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
Yes</td><td class="bc-supports-yes bc-browser-nodejs"><span class="bc-browser-name">nodejs</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
Yes</td></tr><tr><th scope="row">Optional <code>locales</code> parameter</th><td class="bc-supports-unknown bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr title="Compatibility unknown; please update this.">
|
||
?
|
||
</abbr></td><td class="bc-supports-unknown bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr title="Compatibility unknown; please update this.">
|
||
?
|
||
</abbr></td><td class="bc-supports-yes bc-browser-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
52</td><td class="bc-supports-unknown bc-browser-ie"><span class="bc-browser-name">IE</span><abbr title="Compatibility unknown; please update this.">
|
||
?
|
||
</abbr></td><td class="bc-supports-unknown bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr title="Compatibility unknown; please update this.">
|
||
?
|
||
</abbr></td><td class="bc-supports-unknown bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr title="Compatibility unknown; please update this.">
|
||
?
|
||
</abbr></td><td class="bc-supports-unknown bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr title="Compatibility unknown; please update this.">
|
||
?
|
||
</abbr></td><td class="bc-supports-unknown bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr title="Compatibility unknown; please update this.">
|
||
?
|
||
</abbr></td><td class="bc-supports-unknown bc-browser-edge_mobile"><span class="bc-browser-name">Edge Mobile</span><abbr title="Compatibility unknown; please update this.">
|
||
?
|
||
</abbr></td><td class="bc-supports-no bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-no only-icon" title="No support">
|
||
<span>No support</span>
|
||
</abbr>
|
||
No</td><td class="bc-supports-unknown bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr title="Compatibility unknown; please update this.">
|
||
?
|
||
</abbr></td><td class="bc-supports-unknown bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr title="Compatibility unknown; please update this.">
|
||
?
|
||
</abbr></td><td class="bc-supports-unknown bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr title="Compatibility unknown; please update this.">
|
||
?
|
||
</abbr></td><td class="bc-supports-unknown bc-browser-nodejs"><span class="bc-browser-name">nodejs</span><abbr title="Compatibility unknown; please update this.">
|
||
?
|
||
</abbr></td></tr><tr><th scope="row">Optional <code>options</code> parameter</th><td class="bc-supports-unknown bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr title="Compatibility unknown; please update this.">
|
||
?
|
||
</abbr></td><td class="bc-supports-unknown bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr title="Compatibility unknown; please update this.">
|
||
?
|
||
</abbr></td><td class="bc-supports-yes bc-browser-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
52</td><td class="bc-supports-unknown bc-browser-ie"><span class="bc-browser-name">IE</span><abbr title="Compatibility unknown; please update this.">
|
||
?
|
||
</abbr></td><td class="bc-supports-unknown bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr title="Compatibility unknown; please update this.">
|
||
?
|
||
</abbr></td><td class="bc-supports-unknown bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr title="Compatibility unknown; please update this.">
|
||
?
|
||
</abbr></td><td class="bc-supports-no bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-no only-icon" title="No support">
|
||
<span>No support</span>
|
||
</abbr>
|
||
No</td><td class="bc-supports-unknown bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr title="Compatibility unknown; please update this.">
|
||
?
|
||
</abbr></td><td class="bc-supports-unknown bc-browser-edge_mobile"><span class="bc-browser-name">Edge Mobile</span><abbr title="Compatibility unknown; please update this.">
|
||
?
|
||
</abbr></td><td class="bc-supports-no bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-no only-icon" title="No support">
|
||
<span>No support</span>
|
||
</abbr>
|
||
No</td><td class="bc-supports-unknown bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr title="Compatibility unknown; please update this.">
|
||
?
|
||
</abbr></td><td class="bc-supports-unknown bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr title="Compatibility unknown; please update this.">
|
||
?
|
||
</abbr></td><td class="bc-supports-unknown bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr title="Compatibility unknown; please update this.">
|
||
?
|
||
</abbr></td><td class="bc-supports-unknown bc-browser-nodejs"><span class="bc-browser-name">nodejs</span><abbr title="Compatibility unknown; please update this.">
|
||
?
|
||
</abbr></td></tr></tbody></table><section class="bc-legend" id="sect1"><h3 class="offscreen" id="Legend">Legend</h3><dl><dt><span class="bc-supports-yes bc-supports">
|
||
<abbr class="bc-level bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
|
||
</abbr></span></dt><dd>Full support</dd><dt><span class="bc-supports-no bc-supports">
|
||
<abbr class="bc-level bc-level-no only-icon" title="No support">
|
||
<span>No support</span>
|
||
|
||
</abbr></span></dt><dd>No support</dd><dt><span class="bc-supports-unknown bc-supports">
|
||
<abbr class="bc-level bc-level-unknown only-icon" title="Compatibility unknown">
|
||
<span>Compatibility unknown</span>
|
||
|
||
</abbr></span></dt><dd>Compatibility unknown</dd></dl></section></div><p></p>
|
||
<h2 id="See_also" name="See_also">参见</h2>
|
||
<ul>
|
||
<li><a href="Reference/Global_Objects/Array/toString" title="toString() 返回一个字符串，表示指定的数组及其元素。"><code>Array.prototype.toString()</code></a></li>
|
||
<li><a href="Reference/Global_Objects/Intl" title="Intl 对象是 ECMAScript 国际化 API 的一个命名空间，它提供了精确的字符串对比、数字格式化，和日期时间格式化。Collator，NumberFormat 和 DateTimeFormat 对象的构造函数是 Intl 对象的属性。本页文档内容包括了这些属性，以及国际化使用的构造器和其他语言的方法等常见的功能。"><code>Intl</code></a></li>
|
||
<li><a href="Reference/Global_Objects/Object/toLocaleString" title="toLocaleString() 方法返回一个该对象的字符串表示。此方法被用于派生对象为了特定语言环境的目的（locale-specific purposes）而重载使用。"><code>Object.prototype.toLocaleString()</code></a></li>
|
||
<li><a href="Reference/Global_Objects/Number/toLocaleString" title="toLocaleString() 方法返回这个数字在特定语言环境下的表示字符串。"><code>Number.prototype.toLocaleString()</code></a></li>
|
||
<li><a href="Reference/Global_Objects/Date/toLocaleString" title="toLocaleString() 方法返回该日期对象的字符串，该字符串格式因不同语言而不同。新增的参数 locales 和 options 使程序能够指定使用哪种语言格式化规则，允许定制该方法的表现（behavior）。在旧版本浏览器中， locales 和 options 参数被忽略，使用的语言环境和返回的字符串格式是各自独立实现的。"><code>Date.prototype.toLocaleString()</code></a></li>
|
||
</ul>
|
||
</article> |