javascript - 표시 - 자바 스크립트 소수점 추가




소수점 이하 두 자리를 항상 표시하는 형식 번호 (16)

N 개의 장소로 반올림하는 훨씬 일반적인 솔루션

function roundN(num,n){
  return parseFloat(Math.round(num * Math.pow(10, n)) /Math.pow(10,n)).toFixed(n);
}


console.log(roundN(1,2))
console.log(roundN(1.34,2))
console.log(roundN(1.35,2))
console.log(roundN(1.344,2))
console.log(roundN(1.345,2))
console.log(roundN(1.344,3))
console.log(roundN(1.345,3))
console.log(roundN(1.3444,3))
console.log(roundN(1.3455,3))

Output

1.00
1.34
1.35
1.34
1.35
1.344
1.345
1.344
1.346

해당하는 경우 반올림하여 항상 소수점 이하 2 자리를 표시하도록 숫자를 형식화하고 싶습니다.

예 :

number     display
------     -------
1          1.00
1.341      1.34
1.345      1.35

나는 이것을 사용 해왔다.

parseFloat(num).toFixed(2);

하지만 1.00 보다는 1 로 표시합니다.


toFixed () 호출을 만들기 전에 parseFloat () 및 Number () 변환 사이를 결정해야했습니다. 다음은 캡처 후 사용자 입력의 숫자 서식 지정 예제입니다.

HTML :

<input type="number" class="dec-number" min="0" step="0.01" />

이벤트 핸들러:

$('.dec-number').on('change', function () {
     const value = $(this).val();
     $(this).val(value.toFixed(2));
});

위의 코드는 TypeError 예외를 발생시킵니다. html 입력 유형이 "숫자"이지만 사용자 입력은 실제로 "문자열"데이터 유형입니다. 그러나 toFixed () 함수는 Number 인 객체에서만 호출 될 수 있습니다.

내 마지막 코드는 다음과 같습니다.

$('.dec-number').on('change', function () {
     const value = Number($(this).val());
     $(this).val(value.toFixed(2));
});

필자가 Number ()와 parseFloat ()를 함께 사용하는 이유는 빈 입력 문자열이나 NaN 값에 대한 추가 유효성 검사를 수행 할 필요가 없기 때문입니다. Number () 함수는 빈 문자열을 자동으로 처리하고 0으로 변환합니다.


가장 정확한 반올림을 위해이 함수를 만듭니다.

function round(value, decimals) {
    return Number(Math.round(value +'e'+ decimals) +'e-'+ decimals).toFixed(decimals);
}

소수 자릿수 2 자리로 반올림하려면 다음을 사용하십시오.

console.log("seeked to " + round(1.005, 2));
> 1.01

Razu , 기사 및 MDN의 Math.round 참조 덕분에.


나는 좋아한다 :

var num = 12.749;
parseFloat((Math.round(num * 100) / 100).toFixed(2)); // 123.75

소수점 2 자리를 반올림 한 다음 String 또는 Number인지 상관하지 않는 한 parseFloat() 를 사용하여 구문 분석하여 String이 아닌 Number를 반환하십시오.


다음은 소수점 이하의 자리수로 포맷 할 수있는 일반적인 함수입니다.

function numberFormat(val, decimalPlaces) {

    var multiplier = Math.pow(10, decimalPlaces);
    return (Math.round(val * multiplier) / multiplier).toFixed(decimalPlaces);
}

당신은 우리에게 전체 그림을 제공하지 않습니다.

javascript:alert(parseFloat(1).toFixed(2)) 는 위치 표시 줄에 int0을 붙여 넣으면 내 브라우저에 1.00을 표시합니다. 그러나 나중에 뭔가를하면 되돌릴 수 있습니다.

var num = 2
document.getElementById('spanId').innerHTML=(parseFloat(num).toFixed(2)-1)


shows 1 and not 1.00

숫자를 두 개의 소수만 유지하면서 문자열로 변환하십시오.

var num = 5.56789;
var n = num.toFixed(2);

n의 결과는 다음과 같습니다.

5.57

이것은 FF4에서 잘 작동합니다.

parseFloat(Math.round(num3 * 100) / 100).toFixed(2);

라이브 데모

var num1 = "1";
document.getElementById('num1').innerHTML = parseFloat(Math.round(num1 * 100) / 100).toFixed(2);

var num2 = "1.341";
document.getElementById('num2').innerHTML = parseFloat(Math.round(num2 * 100) / 100).toFixed(2);

var num3 = "1.345";
document.getElementById('num3').innerHTML = parseFloat(Math.round(num3 * 100) / 100).toFixed(2);
span {
    border: 1px solid #000;
    margin: 5px;
    padding: 5px;
}
<span id="num1"></span>
<span id="num2"></span>
<span id="num3"></span>

소수점 둘째 자리로 반올림 1.346 따라 1.346 입력은 1.35 를 반환합니다.


이미 jQuery를 사용하고 있다면 jQuery Number Format 플러그인을 사용할 수있다.

플러그인은 형식이 지정된 숫자를 문자열로 반환 할 수 있으며 소수점 및 천 단위 구분 기호를 설정할 수 있으며 표시 할 소수점 수를 선택할 수 있습니다.

$.number( 123, 2 ); // Returns '123.00'

GitHub에서 jQuery Number Format을 얻을 수도 있습니다 .


특정 형식화가 필요한 경우, 사용자 자신의 루틴을 작성하거나 필요한 것을 수행하는 라이브러리 함수를 사용해야합니다. 기본 ECMAScript 기능은 일반적으로 형식이 지정된 숫자를 표시하는 데 충분하지 않습니다.

반올림 및 서식 지정에 대한 자세한 설명은 다음을 http://www.merlyn.demon.co.uk/js-round.htm#RiJ 하십시오. http://www.merlyn.demon.co.uk/js-round.htm#RiJ

일반적으로 반올림 및 서식 지정은 출력 전에 마지막 단계로 수행해야합니다. 이렇게 일찍 예기치 않게 큰 오류가 발생하고 서식을 파괴 할 수 있습니다.


value = 1.005 이면 share 은 실패합니다.

더 나은 해결책으로, 지수 표기법으로 표현 된 숫자를 사용하여 반올림 문제를 피할 수 있습니다.

Number(Math.round(1.005+'e2')+'e-2').toFixed(2); // 1.01

크레딧 : JavaScript의 10 진수 반올림


정밀도 메소드로 Math 객체 확장하기

Object.defineProperty(Math, 'precision',{
   value: function (value,precision,type){
             var v = parseFloat(value),
                 p = Math.max(precision,0)||0,
                 t = type||'round';
              return (Math[t](v*Math.pow(10,p))/Math.pow(10,p)).toFixed(p);
          }
    });

console.log(
    Math.precision(3.1,3), // round 3 digits 
    Math.precision(0.12345,2,'ceil'), // ceil 2 digits
    Math.precision(1.1) // integer part
)


(num + "").replace(/^([0-9]*)(\.[0-9]{1,2})?.*$/,"$1$2")

Number(1).toFixed(2);         // 1.00
Number(1.341).toFixed(2);     // 1.34
Number(1.345).toFixed(2);     // 1.34 NOTE: See andy's comment below.
Number(1.3450001).toFixed(2); // 1.35

document.getElementById('line1').innerHTML = Number(1).toFixed(2);
document.getElementById('line2').innerHTML = Number(1.341).toFixed(2);
document.getElementById('line3').innerHTML = Number(1.345).toFixed(2);
document.getElementById('line4').innerHTML = Number(1.3450001).toFixed(2);
<span id="line1"></span>
<br/>
<span id="line2"></span>
<br/>
<span id="line3"></span>
<br/>
<span id="line4"></span>


var num = new Number(14.12);
console.log(num.toPrecision(2));//outputs 14
console.log(num.toPrecision(3));//outputs 14.1
console.log(num.toPrecision(4));//outputs 14.12
console.log(num.toPrecision(5));//outputs 14.120







number-formatting