JavaScript 문자열 및 숫자 변환


89

JavaScript에서 다음을 어떻게 할 수 있습니까?

  1. "1", "2", "3"을 "123"에 연결

  2. "123"을 123으로 변환

  3. 123 + 100 = 223 더하기

  4. 223을 "223"으로 변환


42
내가 읽은 거의 모든 JavaScript 책은 이러한 문제를 다룹니다. 하지만 괜찮습니다. 질문에 답하는 것은 StackOverflow의 모든 것입니다. @Shadi Almosri--SO에는 "비열하지 말라"규칙이 있습니다. 나는 여기서 질문하는 사람들을 경멸하는 요점을 보지 않는다. 그것이 장소의 요점이기 때문이다.
Nosredna

4
@Nosredna : 나는 질문을하는 것을 완전히 이해하고, 대답하는 것 이상을 좋아하지 않지만, 당신이 시도한 사실을 보여주는 것이 단순히 대답을 기대하는 것보다 더 나은 에티켓이며 또한 개인적인 학습 경험을 위해 더 좋습니다. 내 의견이 아니야. :)
Shadi Almosri 2009-06-09

1
@Shadi, 그럼 어떻게 질문을 했어야 했나요? 이미 답을 찾았다는 선언과 함께?
Nosredna

1
처음봤을 때는 숙제 같은 느낌이 들었지만 다시 읽었을 때 나는 생각하지 않았다고 생각했습니다. 누군가 자바 스크립트를 실험하고 예상치 못한 결과를 얻고이를 해결하고 싶은 것 같았습니다. 즉, stackoverflow.com/faq 에 학생들을위한 명예 코드와 같은 것이 포함되어 있는지 궁금합니다 . 우리는 이곳에서 일종의 글로벌 대학입니다. 저는이 장소에 대한 일련의 윤리가 무엇인지 알아 내려고 노력하는 것이 미친 짓이라고 생각하지 않습니다. 아니면 미친 짓일 수도 있습니다. :-)
artlung 2009-06-09

6
@Shadi, 긍정적 인 측면에서 질문과 답변은 StackOverflow에 있으며 다른 사람들에게 도움이되기를 바랍니다. 특히 자바와 같은 언어에서 올 때 사람들이 항상 이런 것에 집착하는 것을 봅니다. 사람들이 이것을 반복해서 묻는 이유가 있습니다. JavaScript의 표현식이 작동하는 방식을 알고 있다고 생각하기 때문입니다. 그러나 그렇지 않습니다. 그들은 JS 외부의 경험을 바탕으로 가정합니다. 그렇기 때문에 문자열과 숫자를 추가하고 단항 더하기 및 빼기를 시도하는 몇 가지 간단한 테스트를 시도하는 것이 매우 유용합니다.
Nosredna

답변:


120

parseInt()및에 익숙해지기를 원합니다 toString().

그리고 여러분의 툴킷에서 유용한 것은 변수를 살펴보고 그것이 어떤 유형인지 알아내는 것입니다 — typeof:

<script type="text/javascript">
    /**
     * print out the value and the type of the variable passed in
     */

    function printWithType(val) {
        document.write('<pre>');
        document.write(val);
        document.write(' ');
        document.writeln(typeof val);
        document.write('</pre>');
    }

    var a = "1", b = "2", c = "3", result;

    // Step (1) Concatenate "1", "2", "3" into "123"
    // - concatenation operator is just "+", as long
    //   as all the items are strings, this works
    result = a + b + c;
    printWithType(result); //123 string

    // - If they were not strings you could do
    result = a.toString() + b.toString() + c.toString();
    printWithType(result); // 123 string

    // Step (2) Convert "123" into 123
    result = parseInt(result,10);
    printWithType(result); // 123 number

    // Step (3) Add 123 + 100 = 223
    result = result + 100;
    printWithType(result); // 223 number

    // Step (4) Convert 223 into "223"
    result = result.toString(); //
    printWithType(result); // 223 string

    // If you concatenate a number with a 
    // blank string, you get a string    
    result = result + "";
    printWithType(result); //223 string
</script>

이것을 스크립트 태그에 넣은 특별한 이유가 있습니까?
Julix 2016

@Julix 2009 년 초보자를 위해 html 파일로 이동하여 기본 개념을 익 힙니다. 오늘이 신선한 대답을한다면 다르게 할 수도 있지만 아닐 수도 있습니다.
artlung 2011

53

단계 (1) "1", "2", "3"을 "123"으로 연결

 "1" + "2" + "3"

또는

 ["1", "2", "3"].join("")

가입 항목 사이에 지정된 구분 기호를 넣어, 문자열로 방법을 병합을 배열의 항목을. 이 경우 "구분자"는 빈 문자열 ( "")입니다.


단계 (2) "123"을 123으로 변환

 parseInt("123")

ECMAScript 5 이전에는 base 10에 대한 기수를 전달해야했습니다.parseInt("123", 10)


단계 (3) 123 + 100 = 223 추가

 123 + 100


단계 (4) 223을 "223"으로 변환

 (223).toString() 


모두 함께 넣어

 (parseInt("1" + "2" + "3") + 100).toString()

또는

 (parseInt(["1", "2", "3"].join("")) + 100).toString()

4
훌륭하고 명확한 예입니다. 또한 좋은 형식에 대한 찬사-항상 함수 의 기수를 지정parseInt 해야 합니다 .
hotshot309

기수를 포함하여 혼란스러워서 설명 된 다른 답변으로 스크롤했습니다. 혼란의 지점에서 옳도록 빠른 설명으로 편집되었습니다.
ArtOfWarfare

@ArtOfWarfare 감사합니다, 좋은 편집. 이 답변 당시에는 기수가 필요했습니다. 요즘에는 그것을 생략 할 수있는 논쟁이 있습니다. 모든 "최신"브라우저와 Node.js가 지원하는 ES5부터 parseInt (<0-9 만있는 문자열>)은 항상 10
진법을

재미있는 사실 .. Netscape의 원래 JavaScript (1995 년경)에서 parseInt의 기본 기수는 8이었습니다 (문자열에 8 또는 9가 포함되지 않는 한)
저스틴 옴

27
r = ("1"+"2"+"3")           // step1 | build string ==> "123"
r = +r                      // step2 | to number    ==> 123
r = r+100                   // step3 | +100         ==> 223
r = ""+r                    // step4 | to string    ==> "223"

//in one line
r = ""+(+("1"+"2"+"3")+100);

빠른 문자열-> 숫자 변환에 감사드립니다
mcont 2015 년

숫자인지 아닌지 확인하면 parseInt ()를 사용하십시오. 예를 들어 parseInt ( "")는 NaN이지만 + ""는 0입니다!
greene

15

이러한 질문은 JavaScript의 타이핑 시스템으로 인해 항상 발생합니다. 사람들은 숫자의 문자열을 얻을 때 숫자를 얻는다고 생각합니다.

다음은 JavaScript가 문자열과 숫자를 처리하는 방식을 활용하는 몇 가지 사항입니다. 개인적으로 JavaScript가 +가 아닌 다른 기호를 사용했으면합니다. 문자열 연결에 합니다.

단계 (1) "1", "2", "3"을 "123"으로 연결

result = "1" + "2" + "3";

단계 (2) "123"을 123으로 변환

result = +"123";

단계 (3) 123 + 100 = 223 추가

result = 123 + 100;

단계 (4) 223을 "223"으로 변환

result = "" + 223;

이것이 작동하는 이유를 알고 있다면 JavaScript 표현식에 문제가 생길 가능성이 적습니다.


3
나는 실제로 이것이 진행되는 것에 대해 상당히 불투명하기 때문에 이것은 매우 나쁜 습관이라고 생각합니다. 특정 작업이 암시 적 캐스트에 영향을 미친다는 사실을 아는 것은 속임수이며 알아두면 좋은 방법이지만 전혀 읽을 수 없습니다. 커뮤니케이션이 전부입니다.
annakata

1
코드를 읽을 때 무슨 일이 일어나는지 알 수 있도록 이러한 것들을 정확하게 아는 것이 중요하다고 생각합니다. 많은 JavaScript는 소스로 전송되기 때문에 간결하며 작은 코드는 서버 비용 절감을 의미 할 수 있습니다.
Nosredna

6
그러나 압축 도구를 통해이를 달성해야합니다.이 형태에서는 유지 관리 비용이 매우 저렴한 최적화입니다.
annakata

6
그럼에도 불구하고 이러한 것들을 아는 것은 자바 스크립트가 문자열과 숫자를 처리하는 방법에 대한 지식이 부족했던 문제를 방지하는 데 도움이 될 것입니다. 지적 호기심의 문제입니다. 문자열에 숫자를 추가하면 어떻게됩니까? 단항 더하기는 어떻게 작동합니까? 답을 모르면 자바 스크립트를 모르고 이런 질문이 나올 것입니다.
Nosredna

11

다음과 같이 할 수 있습니다.

// step 1 
var one = "1" + "2" + "3"; // string value "123"

// step 2
var two = parseInt(one); // integer value 123

// step 3
var three = 123 + 100; // integer value 223

// step 4
var four = three.toString(); // string value "223"

16
가장 좋은 방법은 parseInt () 함수에 radix 매개 변수를 추가하는 것입니다. 따라서 parseInt (one, 10)는 던진 내용이 잘못 변환되지 않도록 보장합니다.
artlung 09-06-09

3
동의합니다. 그렇지 않으면로 시작하는 값 08 진수 (밑수 8)로 표시됩니다.
hotshot309

1
더욱 예상치 못한 값으로 시작 0하고 포함 8또는 90 예의 복귀로 이어지는, 실패, parseInt('034') = 28그리고 parseInt('09') = 0.
Robert Martin

9

문자열을 숫자로 변환하려면 0을 뺍니다. 숫자를 문자열로 변환하려면 ""(빈 문자열)를 추가합니다.

5 + 1은 6을 줄 것입니다

(5 + "") + 1은 "51"을 제공합니다.

( "5"-0) + 1은 6을 제공합니다.


1
이와 같은 언어 특성에 기반한 트릭에 의존하면 실제 모호함이 발생할 수 있습니다. 예를 들어 "5"-0은 실제로 숫자 5가되지만 "5"+0은 문자열 "50"이됩니다. (예, 몇 년이 지난 것을 알고
Nick Rice

6

parseInt는 scanf와 같은 기능이 잘못되었습니다.

parseInt ( "12 monkeys", 10)는 값이 '12'인 숫자입니다.
+ "12 원숭이"는 값이 'NaN'인 숫자입니다.
Number ( "12 monkeys")는 값이 'NaN'인 숫자입니다.


1

다음은 JavaScript가 어떻게 문제를 일으킬 수 있는지에 대한 매우 짜증나는 예입니다.

을 사용 parseInt()하여 숫자로 변환 한 다음 결과에 다른 숫자를 추가하면 두 문자열이 연결됩니다.

그러나 아래 예제와 같이 괄호 안에 합계 표현식넣어 문제를 해결할 수 있습니다.

결과 : 연령 합계 : 98 세; 연령 합계는 5048이 아닙니다.

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
function Person(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
}

var myFather = new Person("John", "Doe", "50", "blue");
var myMother = new Person("Sally", "Rally", 48, "green");

document.getElementById("demo").innerHTML = "Their age sum is: "+
 (parseInt(myFather.age)+myMother.age)+"; Their age sum is NOT: " +
 parseInt(myFather.age)+myMother.age; 
</script>

</body>
</html>


0

가장 간단한 것은 정수를 문자열로 만들고 싶을 때입니다.

var a,b, c;
a = 1;
b = a.toString(); // This will give you string

이제 string 유형의 변수 b에서 정수를 얻을 수 있습니다.

c = b *1; //This will give you integer value of number :-)

위의 확인을 원하는 경우 숫자입니다. b에 정수가 포함되어 있는지 확실하지 않은 경우 다음을 사용할 수 있습니다.

if(isNaN(c*1)) {
  //NOt a number
}
else //number

0

단항 더하기 연산자 를 사용하여 먼저 숫자로 변환하고 더하기 만하면됩니다. 아래 참조 :-

var a = "4";
var b = "7";
var sum = +a + +b; 
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.