숫자의 형식을 지정하는 방법?
자바스크립트를 사용하여 숫자를 포맷하고 싶습니다.
예:
10 => 10.00
100 => 100.00
1000 => 1,000.00
10000 => 10,000.00
100000 => 100,000.00
기본 제공 코드를 사용하려면 다음과 같이 사용할 수 있습니다.minimumFractionDigits.
의 확장 옵션에 대한 브라우저 호환성toLocaleString()처음 이 답변을 작성했을 때는 제한적이었지만, 현재 상태는 좋아 보입니다.Node.js를 사용하는 경우 다음 작업이 필요합니다.npm install꾸러미
var value = (100000).toLocaleString(
undefined, // leave undefined to use the visitor's browser
// locale or a string like 'en-US' to override it.
{ minimumFractionDigits: 2 }
);
console.log(value);숫자 형식은 문화에 따라 다릅니다.출력에 1대한 문자열 비교를 수행하지 않는 한, 수행해야 할 예의는 선택하는 것입니다.undefined방문자의 브라우저가 가장 2익숙한 형식을 사용하도록 합니다.
// Demonstrate selected international locales
var locales = [
undefined, // Your own browser
'en-US', // United States
'de-DE', // Germany
'ru-RU', // Russia
'hi-IN', // India
'de-CH', // Switzerland
];
var n = 100000;
var opts = { minimumFractionDigits: 2 };
for (var i = 0; i < locales.length; i++) {
console.log(locales[i], n.toLocaleString(locales[i], opts));
}위와 다른 형식의 문화권 출신인 경우 이 게시물을 편집하고 로케일 코드를 추가하십시오.
1 그래서는 안 됩니다.
2 분명히 이것을 통화에 사용하지 마십시오.{style: 'currency', currency: 'JPY'}당신이 현지 환율로 전환하지 않는 한.당신은 당신의 웹사이트가 사람들에게 가격이 300달러라고 말하는 것을 원하지 않을 것입니다. 그것은 정말로 300달러입니다.때때로 실제 전자 상거래 사이트는 이러한 실수를 합니다.
간단한 해결책:
var n = 1234567890;
String(n).replace(/(.)(?=(\d{3})+$)/g,'$1,')
// "1,234,567,890"
사용하다
num = num.toFixed(2);
여기서 2는 소수 자릿수입니다.
편집:
원하는 번호 형식을 지정할 수 있는 기능은 다음과 같습니다.
function formatNumber(number)
{
number = number.toFixed(2) + '';
x = number.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
출처: www.mredkj.com
이제 모든 비익스커브 브라우저(일부 구식 브라우저도 포함)는 를 제공하는 ECMAcript® Internationalization API 사양(ECMA-402)을 지원합니다.이 기능을 사용할 수 있습니다.
const nFormat = new Intl.NumberFormat();
const count = 42000000;
console.log(nFormat.format(count)); // 42,000,000 in many locales, 42.000.000 in many other locales
if (typeof Intl === "undefined" || !Intl.NumberFormat) {
console.log("This browser doesn't support Intl.NumberFormat");
} else {
const nFormat = new Intl.NumberFormat();
const count = 42000000;
console.log(nFormat.format(count)); // 42,000,000 in many locales, 42.000.000 in many other locales
}JasperV가 발견한 버그로 인해 - 좋은 점!예전 코드를 다시 작성했습니다.소수점 두 자리의 양수 값에만 사용해 본 적이 있는 것 같습니다.
달성하려는 항목에 따라 반올림을 원할 수도 있고 원하지 않을 수도 있습니다. 따라서 이 분할을 통해 분할된 두 가지 버전이 있습니다.
일단 라운딩부터.
까지 소것은개한을 소개했습니다.toFixed()방법은 특정 소수점 이하의 자리로 반올림하는 것을 더 정확하게 처리하고 잘 지원됩니다.하지만 그것은 일을 느리게 합니다.
이 버전은 여전히 소수점을 분리하지만 이전과는 다른 방법을 사용합니다.w|0part는 소수점을 제거합니다.그것에 대한 더 많은 정보를 위해, 이것은 좋은 대답입니다.그러면 나머지 정수가 남아 저장됩니다.k원래 숫자에서 다시 뺀 다음 소수를 그대로 둡니다.
또한 마이너스 숫자를 고려하려면, 우리가 칠 때까지 루프(3자리 건너뛰기)를 해야 합니다.b은 이은다 같은것로을넣과않 1산습계다와 같은 때 로 계산되었습니다.-,100.00
나머지 루프는 이전과 동일합니다.
function formatThousandsWithRounding(n, dp){
var w = n.toFixed(dp), k = w|0, b = n < 0 ? 1 : 0,
u = Math.abs(w-k), d = (''+u.toFixed(dp)).substr(2, dp),
s = ''+k, i = s.length, r = '';
while ( (i-=3) > b ) { r = ',' + s.substr(i, 3) + r; }
return s.substr(0, i + 3) + r + (d ? '.'+d: '');
};
아래의 스니펫에서 자신을 테스트하기 위해 숫자를 편집할 수 있습니다.
function formatThousandsWithRounding(n, dp){
var w = n.toFixed(dp), k = w|0, b = n < 0 ? 1 : 0,
u = Math.abs(w-k), d = (''+u.toFixed(dp)).substr(2, dp),
s = ''+k, i = s.length, r = '';
while ( (i-=3) > b ) { r = ',' + s.substr(i, 3) + r; }
return s.substr(0, i + 3) + r + (d ? '.'+d: '');
};
var dp;
var createInput = function(v){
var inp = jQuery('<input class="input" />').val(v);
var eql = jQuery('<span> = </span>');
var out = jQuery('<div class="output" />').css('display', 'inline-block');
var row = jQuery('<div class="row" />');
row.append(inp).append(eql).append(out);
inp.keyup(function(){
out.text(formatThousandsWithRounding(Number(inp.val()), Number(dp.val())));
});
inp.keyup();
jQuery('body').append(row);
return inp;
};
jQuery(function(){
var numbers = [
0, 99.999, -1000, -1000000, 1000000.42, -1000000.57, -1000000.999
], inputs = $();
dp = jQuery('#dp');
for ( var i=0; i<numbers.length; i++ ) {
inputs = inputs.add(createInput(numbers[i]));
}
dp.on('input change', function(){
inputs.keyup();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="dp" type="range" min="0" max="5" step="1" value="2" title="number of decimal places?" />이제 다른 버전은 반올림하지 않습니다.
이는 다른 경로를 사용하여 수학적 계산을 피하려고 합니다(반올림 또는 반올림 오차가 발생할 수 있음).반올림을 원하지 않는 경우 문자열로만 처리됩니다. 즉, 소수점 이하 두 자리로 변환된 1000.999는 1001.00이 아니라 1000.99입니다.
은 이방은사않다습니지하용법▁using다않니▁avoids▁this습▁method이지를 사용하는 것을 피합니다..split()그리고.RegExp()하지만, 둘 다 비교하면 매우 느립니다.그리고 마이클의 대답을 통해 새로운 것을 알게 되었습니다.toLocaleString저는 또한 그것이 (적어도 Firefox와 Chrome, Mac OSX에서는) 그 중에서 가장 느린 방법이라는 것을 알고 놀랐습니다.
용사를 합니다.lastIndexOf()우리는 존재할 수 있는 소수점을 찾고, 거기서부터 다른 모든 것은 거의 같습니다.필요한 경우 여분의 0이 있는 패딩을 저장합니다.이 코드는 소수점 이하 5자리로 제한됩니다.제 테스트에서 이것이 더 빠른 방법이었습니다.
var formatThousandsNoRounding = function(n, dp){
var e = '', s = e+n, l = s.length, b = n < 0 ? 1 : 0,
i = s.lastIndexOf('.'), j = i == -1 ? l : i,
r = e, d = s.substr(j+1, dp);
while ( (j-=3) > b ) { r = ',' + s.substr(j, 3) + r; }
return s.substr(0, j + 3) + r +
(dp ? '.' + d + ( d.length < dp ?
('00000').substr(0, dp - d.length):e):e);
};
var formatThousandsNoRounding = function(n, dp){
var e = '', s = e+n, l = s.length, b = n < 0 ? 1 : 0,
i = s.lastIndexOf('.'), j = i == -1 ? l : i,
r = e, d = s.substr(j+1, dp);
while ( (j-=3) > b ) { r = ',' + s.substr(j, 3) + r; }
return s.substr(0, j + 3) + r +
(dp ? '.' + d + ( d.length < dp ?
('00000').substr(0, dp - d.length):e):e);
};
var dp;
var createInput = function(v){
var inp = jQuery('<input class="input" />').val(v);
var eql = jQuery('<span> = </span>');
var out = jQuery('<div class="output" />').css('display', 'inline-block');
var row = jQuery('<div class="row" />');
row.append(inp).append(eql).append(out);
inp.keyup(function(){
out.text(formatThousandsNoRounding(Number(inp.val()), Number(dp.val())));
});
inp.keyup();
jQuery('body').append(row);
return inp;
};
jQuery(function(){
var numbers = [
0, 99.999, -1000, -1000000, 1000000.42, -1000000.57, -1000000.999
], inputs = $();
dp = jQuery('#dp');
for ( var i=0; i<numbers.length; i++ ) {
inputs = inputs.add(createInput(numbers[i]));
}
dp.on('input change', function(){
inputs.keyup();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="dp" type="range" min="0" max="5" step="1" value="2" title="number of decimal places?" />곧 페이지 내 스니펫 데모로 업데이트하겠지만, 지금은 바이올린이 있습니다.
https://jsfiddle.net/bv2ort0a/2/
이전 방법
이에 RegExp를 사용하는 이유는 무엇입니까?이쑤시개로 이쑤시개를 사용할 수 있을 때는 망치를 사용하지 마십시오. 즉, 끈 조작을 사용합니다.
var formatThousands = function(n, dp){
var s = ''+(Math.floor(n)), d = n % 1, i = s.length, r = '';
while ( (i -= 3) > 0 ) { r = ',' + s.substr(i, 3) + r; }
return s.substr(0, i + 3) + r +
(d ? '.' + Math.round(d * Math.pow(10, dp || 2)) : '');
};
을 통과합니다.
formatThousands( 1000000.42 );
소수점 이하의 첫 번째 스트립:
s = '1000000', d = ~ 0.42
문자열의 끝에서 뒤로 작업합니다.
',' + '000'
',' + '000' + ',000'
접미사하여 은접두와반십접마다니합추무리위여치가하를사미남수림진올사반(▁final▁to다▁rounding:▁(▁suffix위니▁addingwith▁and치▁theise▁by합:dp소수점):
'1' + ',000,000' + '.42'
말도 안 돼.
함수 toFixed이 함수를 사용하여 쉼표를 추가할 수 있습니다.
function addCommas(nStr)
{
nStr += '';
var x = nStr.split('.');
var x1 = x[0];
var x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
n = 10000;
r = n.toFixed(2); //10000.00
addCommas(r); // 10,000.00
http://www.mredkj.com/javascript/numberFormat.html
사용을 고려해 보는 것이 좋습니다.
작업 예제:
const number = 1234567890.123;
console.log(number.toLocaleString('en-US')); // US format
console.log(number.toLocaleString('en-IN')); // Indian formatChrome v60 및 v88에서 테스트됨
출처: Number.prototype.toLocalString() | MDN
저는 이 jQuery-number 포맷터로 당신의 문제를 해결할 수 있다고 생각합니다.
물론 이는 프로젝트에서 jQuery를 사용하는 데 문제가 없다는 것을 가정한 것입니다.기능은 블러 이벤트와 관련이 있음을 유의하시기 바랍니다.
$("#salary").blur(function(){
$(this).parseNumber({format:"#,###.00", locale:"us"});
$(this).formatNumber({format:"#,###.00", locale:"us"});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/timdown/jshashtable/hashtable.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hardhub/jquery-numberformatter/src/jquery.numberformatter.js"></script>
<input type="text" id="salary">function numberWithCommas(x) {
x=String(x).toString();
var afterPoint = '';
if(x.indexOf('.') > 0)
afterPoint = x.substring(x.indexOf('.'),x.length);
x = Math.floor(x);
x=x.toString();
var lastThree = x.substring(x.length-3);
var otherNumbers = x.substring(0,x.length-3);
if(otherNumbers != '')
lastThree = ',' + lastThree;
return otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ",") + lastThree + afterPoint;
}
console.log(numberWithCommas(100000));
console.log(numberWithCommas(10000000));산출량
1,00,000
1,00,00,000
이것은 당신의 문제에 대한 기사입니다.수천 개의 구분자를 추가하는 것은 JavaScript에 내장되어 있지 않으므로 다음과 같이 사용자 자신의 함수를 작성해야 합니다(링크된 페이지에서 가져온 예).
function addSeperator(nStr){
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
또는 sugar.js 라이브러리와 형식 방법을 사용할 수 있습니다.
format(장소 = 0,000 = ',', 10진수 = '.) 숫자를 읽을 수 있는 문자열로 형식을 지정합니다.장소가 정의되지 않은 경우 자동으로 장소가 결정됩니다.천은 천 구분 기호에 사용되는 문자입니다.decimal은 소수점에 사용되는 문자입니다.
예:
(56782).format() > "56,782"
(56782).format(2) > "56,782.00"
(4388.43).format(2, ' ') > "4 388.43"
(4388.43).format(3, '.', ',') > "4.388,430"
제 해결책도 여기에 던져보겠습니다.저는 읽기 쉽도록 각 행에 주석을 달았고 몇 가지 예도 제공했으므로 크게 보일 수 있습니다.
function format(number) {
var decimalSeparator = ".";
var thousandSeparator = ",";
// make sure we have a string
var result = String(number);
// split the number in the integer and decimals, if any
var parts = result.split(decimalSeparator);
// if we don't have decimals, add .00
if (!parts[1]) {
parts[1] = "00";
}
// reverse the string (1719 becomes 9171)
result = parts[0].split("").reverse().join("");
// add thousand separator each 3 characters, except at the end of the string
result = result.replace(/(\d{3}(?!$))/g, "$1" + thousandSeparator);
// reverse back the integer and replace the original integer
parts[0] = result.split("").reverse().join("");
// recombine integer with decimals
return parts.join(decimalSeparator);
}
document.write("10 => " + format(10) + "<br/>");
document.write("100 => " + format(100) + "<br/>");
document.write("1000 => " + format(1000) + "<br/>");
document.write("10000 => " + format(10000) + "<br/>");
document.write("100000 => " + format(100000) + "<br/>");
document.write("100000.22 => " + format(100000.22) + "<br/>");이렇게 하면 쉼표로 구분된 값을 얻을 수 있을 뿐만 아니라 끝에 고정 표기법을 추가할 수 있습니다.
nStr="1000";
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
commaSeperated = x1 + x2 + ".00";
alert(commaSeperated);
jQuery를 사용하는 경우 형식 또는 숫자 형식 플러그인을 사용할 수 있습니다.
function formatNumber1(number) {
var comma = ',',
string = Math.max(0, number).toFixed(0),
length = string.length,
end = /^\d{4,}$/.test(string) ? length % 3 : 0;
return (end ? string.slice(0, end) + comma : '') + string.slice(end).replace(/(\d{3})(?=\d)/g, '$1' + comma);
}
function formatNumber2(number) {
return Math.max(0, number).toFixed(0).replace(/(?=(?:\d{3})+$)(?!^)/g, ',');
}
출처: http://jsperf.com/number-format
이것은 승인된 답변의 약 3배 빠른 버전입니다.배열을 만들지 않고 끝에 있는 정수에 대한 개체 생성 및 문자열 연결을 방지합니다.이 기능은 테이블 등에서 많은 값을 렌더링하는 경우에 유용할 수 있습니다.
function addThousandSeparators(number) {
var whole, fraction
var decIndex = number.lastIndexOf('.')
if (decIndex > 0) {
whole = number.substr(0, decIndex)
fraction = number.substr(decIndex)
} else {
whole = number
}
var rgx = /(\d+)(\d{3})/
while (rgx.test(whole)) {
whole = whole.replace(rgx, '$1' + ',' + '$2')
}
return fraction ? whole + fraction : whole
}
function formatThousands(n,dp,f) {
// dp - decimal places
// f - format >> 'us', 'eu'
if (n == 0) {
if(f == 'eu') {
return "0," + "0".repeat(dp);
}
return "0." + "0".repeat(dp);
}
/* round to 2 decimal places */
//n = Math.round( n * 100 ) / 100;
var s = ''+(Math.floor(n)), d = n % 1, i = s.length, r = '';
while ( (i -= 3) > 0 ) { r = ',' + s.substr(i, 3) + r; }
var a = s.substr(0, i + 3) + r + (d ? '.' + Math.round((d+1) * Math.pow(10,dp)).toString().substr(1,dp) : '');
/* change format from 20,000.00 to 20.000,00 */
if (f == 'eu') {
var b = a.toString().replace(".", "#");
b = b.replace(",", ".");
return b.replace("#", ",");
}
return a;
}
언급URL : https://stackoverflow.com/questions/5731193/how-to-format-numbers
'programing' 카테고리의 다른 글
| iPhone WebKit CSS 애니메이션으로 인해 깜박임 발생 (0) | 2023.07.29 |
|---|---|
| ASP.NET MVC 3 - 요청한 항목을 찾을 수 없습니다.Net Framework 데이터 공급자 (0) | 2023.07.29 |
| 확장에서 c++ b를 로드하지 못했습니다. (0) | 2023.07.24 |
| JSONResponse를 사용하여 Django 1.7의 쿼리 세트를 직렬화하시겠습니까? (0) | 2023.07.24 |
| 내가 일하지 않는 걸 기억해줘요..java.dll을 던집니다.잘못된 상태 예외:사용자 세부 정보 서비스가 필요합니다. (0) | 2023.07.24 |