3.4) 사용자 입력을 받는 방법과 숫자-문자열 간 변환
사용자로부터 입력을 받으려면 prompt 함수를 이용한다. 다음은 이에 대한 예제이다.
|
prompt.htm |
|
// prompt 함수를 호출하고 사용자가 입력한 값을 str에 저장합니다. var str = prompt("Enter name", "Handy"); // 첫 번째 인자는 사용자에게 표시할 설명입니다. // 두 번째 인자는 사용자가 입력할 값의 초기값입니다. // prompt 함수는 사용자가 입력한 값을 문자열로 반환합니다. alert("Hello, " + str + "!"); |
prompt 함수는 주석에도 설명했듯, 사용자가 입력한 값을 문자열로 반환함에 주의하라.
이전 절에서 문자열 두 개를 더할 때 + 연산자를 사용한다고 했다. 문자열과 숫자에 대해 + 연산자를 사용하면 숫자가 문자열 형식으로 변환된 다음 두 문자열을 더한 결과가 나타난다.
|
string_add2.htm |
|
alert("Hello, " + 10 + "!"); // "Hello, 10!"이 출력됩니다. |
그런데 prompt를 이용해 두 정수를 더하는 프로그램을 만들어보자.
|
string_noparse.htm |
|
var num1 = prompt("Enter number 1: ", 10); var num2 = prompt("Enter number 2: ", 20); alert(num1 + num2); // num1=10, num2=20이면 출력 값은? |
우리는 사용자가 입력한 두 값을 더한 결과가 30이기를 기대하고 있다. 그럼 실행 결과를 보자.
|
실행 결과 |
|
1020 |
결과는 아주 엉뚱하게도 1020이라는 수가 출력되었다! 무엇이 잘못되었는지 알겠는가?
방금 prompt가 문자열을 반환하는 함수라고 설명하였다. 따라서 num1과 num2에 저장된 값은 모두 수치 값이 아닌 문자열 값이다. 그리고 문자열 두 개에 + 연산자를 더하면 두 문자열이 합쳐진 결과가 나온다고도 설명하였다!즉 1020이라는 수는 실제로 수가 아니라, 문자열 “10”과 문자열 “20”이 합쳐진 결과로 해석해야 한다.
그러므로 이를 계산하기 위해서는 저장된 문자열을 먼저 수치 형식으로 변환해야 한다. 어떻게 해야 할까? C에서char 형식의 배열에 어떤 정수 문자열이 저장되어있고, 여기에 20을 더해 결과를 얻으려고 한다면, 우리는 atoi 함수를 호출하여 배열에 저장된 문자열을 정수로 먼저 변환한 다음 여기에 20을 더해 결과를 출력해야 한다. JS에서도 같은 일이 일어난다. 문자열을 저장하고 있는 변수를 정수로 변환한 값을 얻으려면 parseInt(), 실수로 변환한 값을 얻으려면 parseFloat()과 같은 함수를 사용해야 한다. 위 문제를 parseInt() 함수를 이용하여 수정한 코드는 다음과 같다.
|
string_parse.htm |
|
var str1 = prompt("Enter number 1: ", 10); var str2 = prompt("Enter number 2: ", 20); var num1 = parseInt(str1); var num2 = parseInt(str2); alert(num1 + num2); |
수를 문자열로 바꾸는 방법은 아주 쉬운데, 다음과 같이 빈 문자열을 더하면 된다.
|
numberToString.htm |
|
var num1 = 10, num2 = 20; alert("" + num1 + num2); |
아니면 toString()이라는 메서드를 호출하는 방법도 있는데 다음과 같다.
|
var num1 = 10, num2 = 20; alert(num1.toString() + num2.toString()); |
이와 같이 prompt 함수 및 숫자-문자열 간 변환 방법을 알 수 있었다.
