Wednesday, February 28, 2007
자바스크립트] 숫자 앞에 공백 추가, 자릿수 맞추기; Leading Spaces to Number JavaScript
자바스크립트에서 숫자를 표현할 때, 앞에 공백(스페이스)을 붙여서 자릿수를 맞추는 함수를 만드는 방법입니다. 예를 들어 다음과 같이
작은 자릿수의 숫자 앞에 공백을 추가하여, 큰 자릿수 숫자와 줄을 맞추는 것입니다.
leadingSpaces(숫자, 자리수)
이런 형식으로 사용합니다.
그런데 HTML에서는 폰트의 종류에 따라, 공백의 폭이 들쭉날쭉합니다. 따라서 "돋움체(DotumChe)" 같이, 폭이 일정한 폰트를 지정해야, 숫자 앞의 공백이 보기 좋게 정렬되어 나옵니다. 다음 예제와 같습니다.
파일명: example.html
(공백 문자가 앞에 붙어 있는지 아닌지 알아 보기 쉽도록, 숫자 양옆에 대괄호를 붙였습니다.)
실용적인 예제: ▶▶ 자바스크립트] 구구단 출력, 구구단표 만들기; HTML JavaScript Multiplication Table 99
숫자 앞의 여백에 0을 추가하기: ▶▶ 자바스크립트] 숫자 앞에 공(0), 제로(영) 붙이기/추가. Leading Zero to Number JavaScript
[ 5]
[ 55]
[555]
[ 55]
[555]
작은 자릿수의 숫자 앞에 공백을 추가하여, 큰 자릿수 숫자와 줄을 맞추는 것입니다.
leadingSpaces(숫자, 자리수)
이런 형식으로 사용합니다.
그런데 HTML에서는 폰트의 종류에 따라, 공백의 폭이 들쭉날쭉합니다. 따라서 "돋움체(DotumChe)" 같이, 폭이 일정한 폰트를 지정해야, 숫자 앞의 공백이 보기 좋게 정렬되어 나옵니다. 다음 예제와 같습니다.
JavaScript: 숫자 여백에 스페이스(Space) 문자 넣기 예제; printf() 함수처럼
파일명: example.html
(공백 문자가 앞에 붙어 있는지 아닌지 알아 보기 쉽도록, 숫자 양옆에 대괄호를 붙였습니다.)
<script type="text/javascript">
document.write('<div style="font:12pt DotumChe">');
document.write('[', leadingSpaces(5, 3), ']<br />');
// 출력 결과: [ 5]
document.write('[', leadingSpaces(55, 3), ']<br />');
// 출력 결과: [ 55]
document.write('[', leadingSpaces(555, 3), ']<br />');
// 출력 결과: [555]
document.write('</div>');
function leadingSpaces(n, digits) {
var space = '';
n = n.toString();
if (n.length < digits) {
for (var i = 0; i < digits - n.length; i++)
space += ' ';
}
return space + n;
}
</script>
document.write('<div style="font:12pt DotumChe">');
document.write('[', leadingSpaces(5, 3), ']<br />');
// 출력 결과: [ 5]
document.write('[', leadingSpaces(55, 3), ']<br />');
// 출력 결과: [ 55]
document.write('[', leadingSpaces(555, 3), ']<br />');
// 출력 결과: [555]
document.write('</div>');
function leadingSpaces(n, digits) {
var space = '';
n = n.toString();
if (n.length < digits) {
for (var i = 0; i < digits - n.length; i++)
space += ' ';
}
return space + n;
}
</script>
실용적인 예제: ▶▶ 자바스크립트] 구구단 출력, 구구단표 만들기; HTML JavaScript Multiplication Table 99
숫자 앞의 여백에 0을 추가하기: ▶▶ 자바스크립트] 숫자 앞에 공(0), 제로(영) 붙이기/추가. Leading Zero to Number JavaScript
tag: html
HTML | CSS | 자바스크립트 JavaScript
<< Home