[ 자바스크립트 ] 숫자를 문자로 바꾸기

[ Javascript ] Converts a decimal number to a string.

최종 수정일( Last modified date ) : 2017. 07. 06


숫자를 문자로 바꿔줄 때에는, 아래처럼 단순하게 toString()함수를 사용하면 된다.
To convert a number to a string, use the toString() function of number, as below.

 
<button onclick="testing()"> Click me </button>
<p id="demo"> </p>

<script type="text/javascript">
function testing () { 
        var number = 1234567890; 
        var string = number.toString(); 
        demo.innerHTML = string; 
} 
</script>
 

또는, 숫자에다가 빈 문자열("")을 더해주어도 된다.
Or, you can add an empty string("") to the number.

 
<button onclick="testing()"> Click me </button>
<p id="demo"> </p>

<script type="text/javascript">
function testing () { 
        var number = 1234567890; 
        var string = "" + number; 
        demo.innerHTML = string; 
} 
</script>
 

하지만, 아주 작은 숫자나 아주 큰 숫자의 경우에는,
e-notation이라는 형식으로, 그 숫자가 10의 몇 승인지로 표시되기도 한다.
However, for very small or large numbers,
it may be displayed in the form of e-notation,

 
<button onclick="testing()"> Click me </button>
<p id="demo"> </p>

<script type="text/javascript">
function testing () { 
        var number = 0.0000008; 
        demo.innerHTML = number; 
} 
</script>
 

※ 0.0000008 = 8 x 10^-7

 
<button onclick="testing()"> Click me </button>
<p id="demo"> </p>

<script type="text/javascript">
function testing () { 
        var number = 0.0000008; 
        var string = number.toString(); 
        demo.innerHTML = string; 
} 
</script>
 

표현만 저렇게 될 뿐이지, 저것도 숫자이기 때문에 정상적으로 계산된다.
Just only the expression will be like that.
It's a number, of course, and so it's calculated normally.

 
<button onclick="testing()"> Click me </button>
<p id="demo"> </p>

<script type="text/javascript">
function testing () { 
        var number = 0.0000008; 
        var sum = number + number; 
        demo.innerHTML = sum; 
} 
</script>
 

---

e-notation 방식을 적용하지 않고서, 숫자를 문자 그대로 표시하는 방법은 아래와 같다.
Here is how to convert a number to a string without e-notation.

첫번째 방법 ( The first way )

 
<script type="text/javascript">
/* 
 * 숫자를 문자열로 변환하기 
 * Converts a decimal number to a string. 
 */ 
function numberToString ( number ) { 

        var string = ( "" + number ); 
             string = string.trim ? string.trim() : string.replace( /^\s+|\s+$/g, "" ); 

       if ( /^[-+]?0[xbo]/i.test( string ) ) { 
                var strSign = ( string.indexOf( "-" ) === 0 ) ? "-" : ""; 
                var integer = string.replace( /^[-+]/, "" ).split( "." )[ 0 ]; 

                string = strSign + ( integer == 0 ? "0" : integer ); 
        } 

        if ( string == 0 || ! isFinite(string) ) return string; 

        var 
          number = typeof number == "number" ? number : Number( string ) 
        , exponents = number.toExponential().split( /[eE]/ )[ 1 ] * 1 
        , mantissa = string.replace( /^[^1-9]+|0*\.?0*([eE][-+]?\d+)?$/g, "" ).replace( ".", "" ) 
        , mLen = mantissa.length 
        , len = 0 
        ; 

        var zeroes = function ( len ) { 
                var x, zero = ""; 
                for ( x = 0; x < len; x++ ) zero += "0"; 
                return zero; 
        }; 

        if ( exponents >= 0  ) { 
                len = exponents + 1 - mLen; 

                if ( len > 0  ) string = mantissa + zeroes( len ); 
                else if ( len < 0  ) { 
                        len = mLen + len; 
                        string = mantissa.substr( 0, len ) + "." + mantissa.substr( len ); 
                } 
                else string = mantissa; 
        } 
        else { 
                if ( exponents == -1  ) string = "0." + mantissa; 
                else { 
                        len = -exponents - 1; 
                        string = "0." + zeroes( len ) + mantissa; 
                } 
        } 

        if ( number < 0  ) string = "-" + string; 

        return string; 
} 
</script>
 

 
<button onclick="testing()"> Click me </button>
<p id="demo"> </p>

<script type="text/javascript">
function testing () { 
        var number = 0.0000008; 

        var string = numberToString( number ); 

        demo.innerHTML = string; 
} 
</script>
 

---

두번째 방법 ( The second way )

 
<script type="text/javascript">
if ( ! String.prototype.trim ){ 
        var regExp_for_trim = /[\s\xA0\uFEFF\u3000\u205F\u2028\u2029\u202F\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A]+/; 

        String.prototype.trim = function trim (){ 
            var source = regExp_for_trim.source; 
            return this.replace( new RegExp( "^" + source + "|" + source + "$", "g" ) , "" ); 
        }; 
} 

function numberToString ( number ) { 
        var string = ( "" + number ).trim(); 

       if ( /^[-+]?0[xbo]/i.test( string ) ) { 
                var strSign = ( string.indexOf( "-" ) === 0 ) ? "-" : ""; 
                var integer = string.replace( /^[-+]/, "" ).split( "." )[ 0 ]; 

                string = strSign + ( integer == 0 ? "0" : integer ); 
        } 

        var number = typeof number == "number" ? number : Number( string ); 

        var object = {  number: number, string: string, integerDigits: 0, decimalPlaces: 0, exponents: 0  }; 

        if ( ! isFinite(number) || number === 0 ) { 

                if ( number === 0 ) object.integerDigits = 1; 

                return object; 
        } 

        var 
          exponents = number.toExponential().split( /[eE]/ )[ 1 ] * 1 
        , mantissa = string.replace( /^[^1-9]+|0*\.?0*([eE][-+]?\d+)?$/g, "" ).replace( ".", "" ) 
        , mLen = mantissa.length 
        ; 

        var digits = 1, places = 0, len = 0; 

        var zeroes = function ( len ) { 
                var x, zero = ""; 
                for ( x = 0; x < len; x++ ) zero += "0"; 
                return zero; 
        }; 

        object.exponents = exponents; 

        if ( exponents >= 0  ) { 
                len = exponents + 1 - mLen; 

                if ( len > 0  ) { 
                        string = mantissa + zeroes( len ); 
                        digits = string.length; 
                } 
                else if ( len < 0  ) { 
                        places = -len; 
                        digits = mLen + len; 
                        string = mantissa.substr( 0, digits ) + "." + mantissa.substr( digits ); 
                } 
                else { 
                        string = mantissa; 
                        digits = mLen; 
                } 
        } 
        else { 
                if ( exponents == -1  ) { 
                        string = "0." + mantissa; 
                        places = mLen; 
                } 
                else { 
                        len = -exponents - 1; 
                        string = "0." + zeroes( len ) + mantissa; 
                        places = mLen + len; 
                } 
        } 

        if ( number < 0  ) string = "-" + string; 

        object.string = string; 
        object.integerDigits = digits; 
        object.decimalPlaces = places; 

        return object; 
} 
</script>
 

 
<button onclick="testing()"> Click me </button>
<p id="demo"> </p>

<script type="text/javascript">
function testing () { 
        var number = 0.0000008; 

        var object = numberToString( number ); 

        var string = object.string; 

        demo.innerHTML = string; 
} 
</script>
 

number             :  
string                :  
integer digits     :  
decimal places    :  

 
<button onclick="testing()"> Click me </button>
number             : <span id="demo1"></span> <br />
string                : <span id="demo2"></span> <br />
integer digits     : <span id="demo3"></span> <br />
decimal places    : <span id="demo4"></span> <br />

<script type="text/javascript">
function testing () { 

        var object = numberToString( 0.0000008 ); 

        var number = object.number; 
        var string = object.string; 
        var digits = object.integerDigits; 
        var places = object.decimalPlaces; 

        demo1.innerHTML = number; 
        demo2.innerHTML = string; 
        demo3.innerHTML = digits; 
        demo4.innerHTML = places; 
} 
</script>
 

이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요 *^^*
If this article is helpful to you, please click the heart button below. :)