JavaScript에서 문자열을 배열로 변환하는 5가지 방법

split() 메소드

이 메서드는 제공된 구분 기호로 문자열을 분할하는 데 사용되며 하위 문자열의 배열을 반환합니다.

const str = 'Tiger,Horse,Elephant,Wolf';
const arr = str.split(','); 
//split string by comma
console.log(arr);
// ["Tiger", "Horse", "Elephant", "Wolf"]

문자열을 각 문자로 나누기 위해 빈 문자열("")을 구분 기호로 지정할 수 있습니다.

const str = 'jscurious';
const arr = str.split('');
console.log(arr); 
// ["j", "s", "c", "u", "r", "i", "o", "u", "s"]

split() 메서드는 분할에 대한 제한을 설정하는 두 번째 선택적 인수를 허용합니다. 이 제한 값은 반환된 배열에 포함될 요소 수를 결정합니다.

const str = 'Cricket | Hockey | Football | Tennis';
const arr = str.split(' | ', 2);
console.log(arr); 
// ['Cricket', 'Hockey']

Array.from() 메서드

이 메소드는 모든 객체iterable에서 배열을 반환합니다. 이 메서드에 문자열 값을 전달하여 문자 배열을 얻을 수 있습니다.

const str = 'jscurious';
const arr = Array.from(str);
console.log(arr); 
// ["j", "s", "c", "u", "r", "i", "o", "u", "s"]

이 메서드는 두 개의 선택적 인수도 허용합니다. 하나는 배열의 각 요소를 호출하기 위한 맵 함수이고, 다른 하나는 맵 함수 실행 시 this로 사용할 값입니다.

const str = 'jscurious';
const arr = Array.from(str, (val, index) => val + index);
// adding index value to each element of array
console.log(arr); 
// ["j0", "s1", "c2", "u3", "r4", "i5", "o6", "u7", "s8"]

스프레드 연산자( … )

전개 연산자는 문자열의 각 문자를 추출하고 전개합니다. 문자열에서 새 배열을 만들기 위해 배열 리터럴[] 안에 있는 모든 문자를 래핑할 수 있습니다.

const str = 'jscurious';
const arr = [...str];
console.log(arr); 
// ["j", "s", "c", "u", "r", "i", "o", "u", "s"]

Object.assign() 메소드

이 방법은 하나 이상의 소스 개체에서 대상 개체로 값과 속성을 복사합니다. 문자열에서 배열을 생성하기 위해 소스로 문자열을 제공하고 대상으로 빈 배열을 제공할 수 있습니다.

const str = 'jscurious';
const arr = Object.assign([], str);
console.log(arr); 
// ["j", "s", "c", "u", "r", "i", "o", "u", "s"]

루프 사용

문자열의 각 문자를 반복하고 해당 문자를 빈 배열에 푸시하여 문자열에서 배열을 만들 수 있습니다.

const str = 'jscurious';
const arr = [];
for (let i of str) {
  arr.push(i);
}
console.log(arr); 
// ["j", "s", "c", "u", "r", "i", "o", "u", "s"]

당신은 또한 좋아할 수 있습니다

Map in JavaScript and when it's a better choice than Object

JavaScript Set object to store unique values

Play audio with HTMLAudioElement API in JavaScript

The URLSearchParams API in JavaScript

JavaScript Fetch API to make HTTP requests

The Vibration API in JavaScript

Generator functions in JavaScript

A brief guide to Object.defineProperty() method

A brief guide to Promises in JavaScript

20+ JavaScript shorthand coding tricks

시간 내주셔서 감사합니다 ❤️
jscurious.com에서 웹 개발에 대한 내 글을 더 찾아보십시오.