it-source

항상 소수점 2자리를 표시하는 형식 번호

criticalcode 2023. 2. 2. 21:09

항상 소수점 2자리를 표시하는 형식 번호

가능한 경우 소수점 2자리를 항상 표시하도록 숫자를 포맷하고 싶습니다.

예:

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

저는 이것을 사용하고 있습니다.

parseFloat(num).toFixed(2);

하지만 지 것 은ing이 but it?1 as ~하듯이1, 대신.1.00.

(Math.round(num * 100) / 100).toFixed(2);

라이브 데모

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

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

var num3 = "1.345";
document.getElementById('num3').innerHTML = (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>

소수점 이하 2자리까지 반올림되므로 입력은1.346 will return 돌아온다1.35.

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>

이 답변은 다음과 같은 경우에 실패합니다.value = 1.005.

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

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

@Kon과 원저작자가 제안하는 클리너 코드:

Number(Math.round(parseFloat(value + 'e' + decimalPlaces)) + 'e-' + decimalPlaces)

You may add 추가할 수 있습니다.toFixed()소수점점을 유지하려면 수 점 지 유 지 력 해 at입 point다마 to e니 the:합위 retain에g end decimal소 the막기을하 at point to e: retain §:1.00, stringring, 자자,, string string string string string string string string but 。

Number(Math.round(parseFloat(value + 'e' + decimalPlaces)) + 'e-' + decimalPlaces).toFixed(decimalPlaces)

크레딧: JavaScript에서 소수점 반올림

최신 브라우저의 경우 다음을 사용합니다.

var num = 1.345;
num.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 });

소수 구분 기호를 제어하기 위한 첫 번째 매개 변수로 로케일 태그를 지정합니다.점의 경우 영어 미국 로케일을 사용합니다.

num.toLocaleString("en-US", { maximumFractionDigits: 2, minimumFractionDigits: 2 });

그 결과, 다음과 같습니다.

1.35

유럽에서는 대부분의 국가에서 쉼표를 소수 구분자로 사용하므로 스웨덴어/스웨덴어 로케일을 사용하는 경우:

num.toLocaleString("sv-SE", { maximumFractionDigits: 2, minimumFractionDigits: 2 });

다음을 제공합니다.

1,35

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

다음 중 하나를 사용하는 것이 좋습니다.

new Intl.NumberFormat('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(num)

이렇게 하면 지정한 국가의 로컬 형식도 얻을 수 있습니다.게다가 소수점 2개를 정확하게 표시할 수 있습니다(num이 1인지 1.12345인지 여부에 관계없이 각각 1.00과 1.12가 표시됩니다).

이 예에서는 독일 현지화를 사용하고 있습니다.숫자에 수천 개의 딜리미터를 표시하도록 하고 싶기 때문입니다.이 출력은 다음과 같습니다.

1 => 1,00
1.12 => 1,12
1.1234 => 1,12
1234 => 1.234,00
1234.1234 => 1.234,12

가장 정확한 반올림을 위해 이 함수를 만들고 소수점 2자리로 반올림합니다.

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



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

> 1.01

Razu, 이 기사 및 MDN의 Math.round 참조에 감사드립니다.

가장 간단한 답변:

var num = 1.2353453;
num.toFixed(2); // 1.24

예: http://jsfiddle.net/E2XU7/

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

당신은 우리에게 전체상을 주지 않을 것이다.

javascript:alert(parseFloat(1).toFixed(2))로케이션 바에 붙여넣으면 브라우저에 1.00이 표시됩니다.하지만 나중에 뭔가 하면 원래대로 돌아갑니다.

alert(parseFloat(1).toFixed(2))

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

<span id="spanId"></span>

shows 1 and not 1.00

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat

var number = 123456.789;
console.log(new Intl.NumberFormat('en-IN', {
  maximumFractionDigits: 2
}).format(number));

jQuery를 이미 사용 중인 경우 jQuery Number Format 플러그인을 사용할 수 있습니다.

플러그인은 형식화된 숫자를 문자열로 반환하고, 10진수 및 수천 개의 구분 기호를 설정할 수 있으며, 표시할 소수점 수를 선택할 수 있습니다.

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

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

이게 당신이 말하는 건가요?

[편집 20200530] @razu가 준 답은 최고의 임호입니다.여기 약간 리팩터링된 버전이 있습니다.

올바른 값이 .showAsFloat(2.3346)(결과 2.33 단, 2.34가 됩니다.그럼, 을 참조해당 항목도 참조해 주세요.

const showAsFloat = (input, decimals = 2, asString = false) => {
  if (input === null || input.constructor === Boolean || isNaN(+input)) {
    return input;
  }
  const converted = +( `${Math.round( parseFloat( `${input}e${decimals}` )  )}e-${decimals}` );
  return asString ? converted.toFixed(decimals) : converted
};

document.querySelector('#result').textContent = [
  'command                      | result',
  '-----------------------------------------------',
  'showAsFloat(1);              | ' + showAsFloat(1),
  'showAsFloat(1.314);          | ' + showAsFloat(1.314),
  'showAsFloat(\'notanumber\')    | ' + showAsFloat('notanumber'),
  'showAsFloat(\'23.44567\', 3)   | ' + showAsFloat('23.44567', 3),
  'showAsFloat(2456198, 5, true)| ' + showAsFloat('24568', 5, true),
  'showAsFloat(2456198, 5)      | ' + showAsFloat('24568', 5),
  'showAsFloat(0, 2, true);     | ' + showAsFloat(0, 2, true),
  'showAsFloat(1.345);          | ' + showAsFloat(1.345),
  'showAsFloat(0.005);          | ' + showAsFloat(0.005),
  'showAsFloat(null);           | ' + showAsFloat(null),

].join('\n');

<pre id="result"></pre>

층을 찾으세요?

var num = 1.42482;
var num2 = 1;
var fnum = Math.floor(num).toFixed(2);
var fnum2 = Math.floor(num2).toFixed(2);
console.log(fnum + " and " + fnum2); //both values will be 1.00

숫자를 문자열로 변환하고 소수점 2개만 유지합니다.

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

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

5.57

가장 긴 스레드 중 하나를 만나보세요.다음은 저의 해결책입니다.

parseFloat(Math.round((parseFloat(num * 100)).toFixed(2)) / 100 ).toFixed(2)

구멍을 뚫을 수 있는 사람이 있으면 알려주세요.

function currencyFormat (num) {
    return "$" + num.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
}

console.info(currencyFormat(2665));   // $2,665.00
console.info(currencyFormat(102665)); // $102,665.00

또한 임의의 소수점 이하 자리까지 형식을 지정할 수 있는 일반 함수도 있습니다.

function numberFormat(val, decimalPlaces) {

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

특정 포맷이 필요한 경우 자신만의 루틴을 작성하거나 필요한 기능을 수행하는 라이브러리 기능을 사용해야 합니다.일반적으로 기본적인 ECMAScript 기능은 포맷된 번호를 표시하기에 충분하지 않습니다.

~~반올림 및 포맷에 대한 자세한 설명은 다음과 같습니다.http://www.merlyn.demon.co.uk/js-round.htm#RiJ~~

일반적으로 반올림 및 포맷은 출력 전 마지막 단계로만 구성해야 합니다.이렇게 하면 예기치 않게 큰 오류가 발생하여 포맷이 파괴될 수 있습니다.

플로어만을 사용해 라운딩을 실시하는 또 다른 솔루션. 즉, 계산된 금액이 원래 금액보다 크지 않은지 확인합니다(거래에 필요한 경우도 있습니다).

Math.floor(num* 100 )/100;

function number_format(string,decimals=2,decimal=',',thousands='.',pre='R$ ',pos=' Reais'){
  var numbers = string.toString().match(/\d+/g).join([]);
  numbers = numbers.padStart(decimals+1, "0");
  var splitNumbers = numbers.split("").reverse();
  var mask = '';
  splitNumbers.forEach(function(d,i){
    if (i == decimals) { mask = decimal + mask; }
    if (i>(decimals+1) && ((i-2)%(decimals+1))==0) { mask = thousands + mask; }
    mask = d + mask;
  });
  return pre + mask + pos;
}
var element = document.getElementById("format");
var money= number_format("10987654321",2,',','.');
element.innerHTML = money;

#format{
display:inline-block;
padding:10px;
border:1px solid #ddd;
background:#f5f5f5;
}

<div id='format'>Test 123456789</div>

아래 코드 시도:

function numberWithCommas(number) { 

   var newval = parseFloat(Math.round(number * 100) / 100).toFixed(2);

   return newval.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

var quantity = 12;

var import1 = 12.55;

var total = quantity * import1;

var answer = parseFloat(total).toFixed(2);

document.write(answer);

fixed() 콜을 발신하기 전에 parse Float() 변환과 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 입력 유형은 "number"이지만 사용자 입력은 실제로는 "string" 데이터 유형입니다.단, toFixed() 함수는 Number 개체에서만 호출할 수 있습니다.

최종 코드는 다음과 같습니다.

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

Number() vs. parseFloat()를 사용하여 캐스트하는 것을 선호하는 이유는 빈 입력 문자열이나 NaN 값 모두에 대해 추가 검증을 수행할 필요가 없기 때문입니다.Number() 함수는 빈 문자열을 자동으로 처리하여 0으로 변환합니다.

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

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

var num3 = "1.345";
document.getElementById('num3').innerHTML = (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>

RegExp - 대체 접근법

입력 시 문자열이 있으므로(파스를 사용하기 때문에) 문자열 조작과 정수 계산만 사용하여 결과를 얻을 수 있습니다.

let toFix2 = (n) => n.replace(/(-?)(\d+)\.(\d\d)(\d+)/, (_,s,i,d,r)=> {
  let k= (+r[0]>=5)+ +d - (r==5 && s=='-');
  return s + (+i+(k>99)) + "." + ((k>99)?"00":(k>9?k:"0"+k));
})


// TESTs

console.log(toFix2("1"));
console.log(toFix2("1.341"));
console.log(toFix2("1.345"));
console.log(toFix2("1.005"));

설명.

s징조입니다.i정수부분입니다.d도트 뒤의 첫 번째 두 자리 숫자입니다.r다른 자리수입니다(사용하고 있습니다).r[0]계산 반올림 값)
k마지막 두 자리(정수로 표시됨)에 대한 정보가 포함되어 있습니다.
한다면r[0]이>=5그리고 우리는 덧붙인다.1로.d- 단, 마이너스(-)의 경우)s=='-')와r5와 완전히 같기 때문에 이 경우 1절(호환성을 위해 - 같은 방법으로)을 생략합니다.Math.round마이너스 수치로 동작합니다.Math.round(-1.5)==-1)
그 후 마지막 두 자리 숫자일 경우k99보다 크면 정수 부분에 1을 더합니다.i

마음에 드는 것:

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

소수점 2로 숫자를 반올림한 다음, 반드시 다음 값으로 구문 분석하십시오.parseFloat()String 또는 Number 중 어느 쪽이든 상관하지 않는 한 String이 아닌 Number를 반환합니다.

정밀도 방법을 사용하여 산술 개체 확장

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
)

number.js 를 사용할 수 있습니다.

numeral(1.341).format('0.00') // 1.34
numeral(1.345).format('0.00') // 1.35

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js" integrity="sha512-pHVGpX7F/27yZ0ISY+VVjyULApbDlD0/X0rgGbTqCE7WFW5MezNTWG/dnhtbBuICzsd0WQPgpE4REBLv+UqChw==" crossorigin="anonymous"></script>


<input type="text" class = 'item_price' name="price" min="1.00" placeholder="Enter Price" value="{{ old('price') }}" step="">

<script> 
$(document).ready(function() {
    $('.item_price').mask('00000.00', { reverse: true });
});
</script>

언급URL : https://stackoverflow.com/questions/6134039/format-number-to-always-show-2-decimal-places

'it-source' 카테고리의 다른 글

SSL/TLS 보호를 위해 openssl 확장이 필요합니다. (0)	2023.02.02
작곡가에게 포크를 어떻게 요구합니까? (0)	2023.02.02
Aria(MariaDB)에서 트랜잭션을 활성화하려면 어떻게 해야 합니까? (0)	2023.02.02
자체 참조 테이블에서 주문 기준 (0)	2023.02.02
빈 문자열의 "분할"이 비어 있지 않은 어레이를 반환하는 이유는 무엇입니까? (0)	2023.02.02

현재글항상 소수점 2자리를 표시하는 형식 번호

각종 프로그래밍 정보를 다루는 블로그입니다.

Python, mariaDB, spring-boot, git, JQuery, javascript, java, sql-server, PHP, mysql, AngularJS, Excel, C, reactjs, Wordpress, JSON, AJAX, oracle, Powershell, Android,

Today :
Yesterday :

criticalcode

항상 소수점 2자리를 표시하는 형식 번호

항상 소수점 2자리를 표시하는 형식 번호

RegExp - 대체 접근법

'it-source' 카테고리의 다른 글

'it-source'의 다른글

티스토리툴바

« 2025/03 »
일	월	화	수	목	금	토
						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

항상 소수점 2자리를 표시하는 형식 번호

항상 소수점 2자리를 표시하는 형식 번호

RegExp - 대체 접근법

'it-source' 카테고리의 다른 글

'it-source'의 다른글

관련글

티스토리툴바