[Javascript] 문자열을 숫자 배열로 변환하는 방법 - split(",").map(Number)

문자열을 숫자 배열로 변환하는 방법

여러 숫자를 입력 받고 배열로 만들어야하는 과정이 있었다.

예를 들어, 1, 2, 3, 4 를 입력하면 [1, 2, 3, 4]로 저장되게끔 만들어지게끔.

split()으로 값 분리 - split() 함수 내 인자로 구분 | map(Number) - 배열 내 원소 숫자로 변환

문제 1

','(콤마)를 구분점으로 값을 분리하기에 split(",")을 활용한다. 

split으로 숫자들을 분리하면 원하는 값처럼 숫자가 아닌 문자열로 들어가게 된다.

 

해결 1

이때 split 함수뒤에 .map(Number)만 써주면 자동으로 문자가 숫자로 바뀌어 배열로 들어가게 된다.

---

문제 2

모든 사용자가 1, 2, 3, 4와 같이 ','(콤마)와 띄어쓰기를 온전하게 입력하지 않을 수도 있다. 

1,2   ,3 ,  4가 될 수도 있고, 1     , 2, 3,   4 가 될 수도 있다.

여기서 궁금했던 점은 구분점은 ','(콤마)이지만, 어떻게 온전하지 않은 입력을 구분해야하나에 대한 궁금증이 생겼다. 

 

해결 2

split(",")로 구분했을 경우 [ '1', '2   ', '3 ', '  4' ]과 같이 분리되고, 

map(Number)를 하는 과정에서 string 타입을 number 타입으로 형변환이 되며 공백이 무시되면서

온전하지 않은 입력도 구분이 가능해졌다. 

 

다른 방법

만약, 입력받은 문자열을 숫자 배열이 아닌 문자열 배열로 진행하고 싶다면, trim()을 이용하여 앞뒤 공백을 제거하는 방법을 활용하면 된다.

answer = '1,2   ,3 ,  4';
let indexArr = answer.split(',').map(x => x.trim());
console.log(indexArr);

//출력 : ['1', '2', '3', '4']

answer = '1,2   ,3 ,  4';
let indexArr = answer.split(',').map(Number);
console.log(indexArr);

//출력 : [1, 2, 3, 4]

 

 

결론:

split(",")으로 입력 값 분리 - map(Number) 활용해서 숫자로 변환