자바스크립트에서 문자열의 문자들을 거꾸로 뒤집는 방법을 소개합니다. 또는, 구분자로 구분되어있는 단어들을 역순으로 변경하여 문자열로 만드는 방법을 소개합니다.
1. reverse()를 이용하여 문자열의 문자들을 역순으로 변경
아래 예제는 문자열의 문자들을 거꾸로 뒤집는 예제입니다. 먼저 split('')
은 문자열의 문자들을 1개씩 분리하여 배열로 만듭니다. 그리고 reverse()
는 배열에 있는 요소들의 순서를 역순으로 변경합니다. 마지막으로 join('')
은 배열의 요소들을 하나의 문자열로 합칩니다. 이 과정을 거치면 문자열의 문자들이 역순으로 변경됩니다.
const str = 'Hello, World';
const reversed = str.split('').reverse().join('');
console.log(reversed);
Output:
dlroW ,olleH
위의 과정을 단계별로 출력해보면 조금 더 이해하기 쉬운데, 아래와 같이 출력됩니다.
const str = 'Hello, World';
console.log(str.split(''));
console.log(str.split('').reverse());
console.log(str.split('').reverse().join(''));
Output:
[
'H', 'e', 'l', 'l',
'o', ',', ' ', 'W',
'o', 'r', 'l', 'd'
]
[
'd', 'l', 'r', 'o',
'W', ' ', ',', 'o',
'l', 'l', 'e', 'H'
]
dlroW ,olleH
2. reverse 함수를 직접 구현하여 문자열 뒤집기
자바스크립트에서 기본으로 지원하는 함수를 이용하지 않고, 직접 아래와 같이 함수를 구현할 수 있습니다.
reverseString()
의 인자로 문자열을 전달하면, 역순으로 변경된 문자열이 리턴됩니다.
function reverseString(str) {
let reversed = '';
for(let i = str.length - 1; i >= 0; i--) {
reversed = reversed + str[i];
}
return reversed;
};
const reversed = reverseString('Hello, World');
console.log(reversed);
Output:
dlroW ,olleH
3. 구분자로 분리된 단어들을 거꾸로 뒤집기
아래와 같이 구분자 ,
로 분리된 단어들을 역순으로 변경할 수 있습니다. 문자들을 역순으로 변경한 것과 같은 방식인데, split()에 구분자 ,
를 인자로 전달하는 것이 다릅니다. split()으로 분리된 단어들의 배열을 reverse()
로 역순으로 변경하고, join(',')
으로 다시 조립하면 뒤집어진 문자열이 리턴됩니다.
const str = 'Hello,World,JavaScript';
const reversed = str.split(',').reverse().join(',');
console.log(reversed);
Output:
JavaScript,World,Hello
Loading script...
Related Posts
- Javascript - 현재 날짜/시간을 항상 한국 기준으로 가져오기
- Javascript - 문자열 사이에 문자 넣기
- Javascript - 버튼 활성화/비활성화 시키는 방법
- Javascript - 버튼 이름 변경하기
- Javascript - div 안의 내용 가져오기, 변경, 추가, 삭제
- Javascript - <ol>, <ul>에 <li> 동적 추가, 삭제
- Javascript - div 생성, 추가, 삭제 방법
- Javascript - 테이블 행(tr) 숨기기, 보이기
- Javascript - div에 링크 거는 방법
- Javascript - 자식 요소(element) 개수 확인
- Javascript - 요소(element) 복사, 붙여넣기
- Javascript - div에 클릭 이벤트(onclick) 설정 방법
- Javascript - 체크박스 선택/해제 시, 텍스트박스 활성화/비활성화
- Javascript - input 숫자만 입력받도록 설정
- Javascript - 자식 노드 모두 제거
- Javascript - 체크박스 선택, 해제 방법
- Javascript - input text 값 가져오기
- JavaScript - 문자열을 배열(Array)로 변환
- JavaScript - 특정 문자열의 포함 여부 확인 (includes, 정규표현식)
- JavaScript - 문자열 비교 방법, 5가지
- JavaScript - 문자열 바꾸기(replace, 정규식 치환)
- JavaScript - 배열 전체 출력 (for, forEach, for in, for of)
- JavaScript - 한번만 실행되는 함수 (once: true)
- JavaScript - 선택된 checkbox 값 가져오기
- JavaScript - element(버튼, div) 보이기 숨기기
- JavaScript - 숫자를 배열로 변경하는 방법
- JavaScript - div, 태그 안의 내용 가져오기
- JavaScript - 부모, 형제, 자식 element 찾기
- JavaScript - 클래스 이름으로 element 찾는 방법
- JavaScript Array find() 함수
- JavaScript Array splice() 함수
- JavaScript의 contains() 함수
- JavaScript sort() 함수, 예제 소개
- JavaScript - Set 생성 및 초기화
- JavaScript Set add() 함수