[JS] 문자열(String) 조작 함수 이해하기

해당 글의 목적은 문자열을 조작하는 함수로 문자열 조작에 사용되는 메서드에 대해서 공식 문서를 읽어보고 예재를 통해서 이해를 돕기 위해 작성한 글입니다. 해당 글에서는 모든 메서드에 대해서는 포함되어 있지 않고 자주 사용되는 메서드 위주로 작성하였습니다. (상시 업데이트 예정입니다)

 

 

0. 요약

---

번호	입력 타입	주요 기능	메서드 명	반환 타입
1	Array / string	문자열 조작	split() / Array.from() / Spread Operator	string
2	string	문자열 조작	split()	Array
3	string	문자열 조작	charCodeAt() / fromCharCode()	number
4	string	문자열 조작	substring()	string
5	string	문자열 조작	slice()	string
6	string	문자열 조작	repeat()	string
7	string	문자열 조작	replace() / replaceAll()	string
8	string	문자열 조작	concat()	string
9	string	문자열 조작	match()	object
10	string	문자열 조작	search()	number
11	string	문자열 조작	toUpperCase() / toLowerCase()	string

 

1. [split / Array.from / Spread Operator] 문자열을 배열로 변환하는 메서드

---

💡 해당 메서드들은 문자열을 배열로 바꾸는 경우에 사용되는 메서드입니다.

 

[ API Document ]

/**
 * Array.from()의 속성
 * @param {String, Number, Set, Map} arrayLike : 배열로 변환하고자 하는 유사 배열 객체나 반복 가능한 객체입니다.
 * @param {} mapFn : 	[Optional] 배열의 모든 요소에 대해 호출할 맵핑 함수입니다.
 * @param {} thisArg : 	[Optional] mapFn 실행 시에 this로 사용할 값입니다.
 * @return {Array}: 새로운 배열 반환 값입니다
 */
Array.from(arrayLike[, mapFn[, thisArg]])

/**
 * Array.split()의 속성
 * @param {string} separator : [Optional] 원본 문자열을 끊어야 할 부분을 나타내는 문자열을 나타냅니다. 문자열이나 정규표현식 입력이 가능합니다.
 * @param {number} limit :     [Optional] 끊어진 문자열의 최대 개수를 나타내는 정수입니다.
 * @return {Array} :           주어진 문자열을 separator마다 끊은 부분 문자열을 담습니다.
 */
split(separator, limit)

String.prototype.split() - JavaScript | MDN

Array.from() - JavaScript | MDN

 

[ 해당 메서드 활용하기 ]

/**
 * 기본 사용 방법
 */
const strItem = '안녕하세요';

// from()으로 문자열을 배열로 변환합니다.
const fromMethodStr = Array.from(strItem); // ["안", "녕", "하", "세", "요"]

// split()으로 문자열을 배열로 변환합니다.
const splitMethodStr = strItem.split(''); // ["안", "녕", "하", "세", "요"]

// Spread Operator 으로 문자열을 배열로 변환합니다.
const spreadMethodStr = [...strItem]; // ["안", "녕", "하", "세", "요"]

 

2. [split] 문자열을 특정 문자 기준으로 나누는데 사용하는 메서드

---

💡 split() 메서드는 문자열을 배열로 나누는 기능 외에도 특정 기준의 문자열을 기준으로 나누는 용도로 사용되는 메서드입니다.

 

[ API Doument ]

/**
 * Array.split()의 속성
 * @param {string} separator : [Optional] 원본 문자열을 끊어야 할 부분을 나타내는 문자열을 나타냅니다. 문자열이나 정규표현식 입력이 가능합니다.
 * @param {number} limit : [Optional] 끊어진 문자열의 최대 개수를 나타내는 정수입니다.
 * @return {Array} : 주어진 문자열을 separator마다 끊은 부분 문자열을 담은
 */
split(separator, limit)

String.prototype.split() - JavaScript | MDN

 

[ 해당 메서드 활용하기 ]

/**
 * 기본 사용 방법
 */
const strItem = '안 녕 하 세 요';

// split()으로 문자열을 배열로 변환합니다.
const splitMethodStr = strItem.split(' '); // ["안", "녕", "하", "세", "요"]

// split()으로 문자열을 배열로 변환합니다.
const strItem2 = '안!녕!하!세!요';
const splitMethodStr2 = strItem2.split('!');// ["안", "녕", "하", "세", "요"]

// split()으로 문자열을 배열로 변환합니다.
const strItem3 = "안^녕^하세요";
const splitMethodStr3 = strItem3.split('^');// ["안", "녕", "하세요"]

 

3. [charCodeAt / fromCharCode] 문자열 ASCII 코드 변환 및 문자열 반환 관련 메서드

---

💡 charCodeAt() 메서드는 문자열을 ASCII 코드로 변환하는 메서드입니다.
💡 fromCharCode() 메서드는 ASCII 코드를 문자열로 변환하는 메서드입니다.

 

[ API Document ]

/**
 * string.charCodeAt()의 속성
 * @param {string} index : 0 이상이고 문자열의 길이보다 작은 정수를 의미하며 숫자가 아니라면 0을 기본값으로 사용합니다.
 * @return {number} : 주어진 인덱스 대한 문자에 대한 UTF-16 코드를 나타내는 숫자 범위 밖으로 넘어갔을 경우 NaN 값을 가집니다.
 */
string.charCodeAt(index)

/**
 * string.fromCharCode()의 속성
 * @param {number} num : UTF-16 코드 유닛인 숫자 뭉치를 의미하며 가능한 값의 범위는 0부터 65535(0xFFFF)까지입니다. 0xFFFF를 초과하는 값은 잘립니다.
 * @return {string} : 주어진 UTF-16 코드 유닛 N개로 이루어진 문자열 입니다.
 */
String.fromCharCode(num1[, ...[, numN]])

String.prototype.charCodeAt() - JavaScript | MDN

String.fromCharCode() - JavaScript | MDN

 

[ 해당 메서드 활용하기 ]

/**
 * 기본 사용 방법
 */
const inputStr = 'Hello';

// charCodeAt()으로 문자열을 ASCII 코드로 변환합니다.
const stringToAsciiNum = inputStr.charCodeAt(0); // 72

// charCodeAt()으로 ASCII코드를 문자열로 변환합니다.
const asciiToString = String.fromCharCode(72); // H

/**
 * 응용 사용 방법
 */

// charCodeAt()으로 문자열 전체를 ASCII 코드로 변환합니다.
const strItem = 'Hello';
let convertStrToAscii = '';
Array.from(strItem).map((item, idx) => {
	convertStrToAscii += `${strItem.charCodeAt(idx)} `; // 72 101 108 108 111
});

// fromCharCode()으로 ASCII 코드를 문자열로 변환합니다.
let convertStr = '';
convertStrToAscii.split(' ').map((item, idx) => {
	convertStr += String.fromCharCode(parseInt(item)); // Hello
});

 

[참고] ASIIC 코드 중 자주 사용하는 범위

분류	범위	코드
대문자	65 ~ 90	x >= 65 && x <= 90
소문자	97 ~ 122	x >= 97 && x <= 122
숫자	48 ~ 57	x >= 48 && x <= 57
알파벳 범위	65 ~ 90 && 97 ~ 122	(x >= 65 && x <= 90) && (x >= 97 && x <= 122)

 

4. [substring] 인덱스 기준 문자열 나누기 관련 메서드

---

💡 substring() 메서드는 string 객체의 시작 인덱스로부터 종료 인덱스 전까지 문자열의 부분 문자열을 반환합니다. (* 원본 배열은 바뀌지 않습니다.)

 

[ API Document ]

/**
 * string.substring()의 속성
 * @param {number} indexStart : 반환 문자열의 시작 인덱스입니다.
 * @param {number} indexEnd : [Optinal] 반환문자열의 마지막 인덱스입니다.
 * @return {number} : 기존 문자열의 부분 문자열을 반환합니다.
 */
str.substring(indexStart[, indexEnd])

String.prototype.substring() - JavaScript | MDN

 

[ 해당 메서드 활용하기 ]

/**
 * 기본 사용 방법
 */
const strItem = '동해물과 백두산이 마르고 닳도록';

// substring() 메서드로 문자열을 나눕니다.
const strItem1 = strItem.substring(0, 4); // "동해물과"
const strItem2 = strItem.substring(5, 9); // "백두산이"
const strItem3 = strItem.substring(10, 13); // "마르고"
const strItem4 = strItem.substring(14, 17); // "닳도록"

 

5. [slice] 인덱스를 기준으로 문자열 나누는데 사용하는 메서드

---

💡 slice() 메서드는 어떤 배열의 시작(begin)부터 종료(end)까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. (* 원본 배열은 바뀌지 않습니다.)

 

[ API Document ]

/**
 * str.slice()의 속성
 * @param {number} begin : [Optinal] 0을 시작으로 하는 추출 시작점에 대한 인덱스를 의미하며, slice(-2) 는 배열에서 마지막 두 개의 엘리먼트를 추출합니다.
 * @param {number} end : [Optinal] 추출을 종료 할 0 기준 인덱스입니다.
 * @return {string} : 추출한 요소를 포함한 새로운 배열입니다.
 */
str.slice([begin[, end]])

Array.prototype.slice() - JavaScript | MDN

 

[ 해당 메서드 활용하기 ]

/**
 * 기본 사용 방법
 */
 
 // slice() 메서드로 문자열을 나눕니다.
const strItem = '동해물과 백두산이 마르고 닳도록';
const strItem1 = strItem.slice(0, 4); // "동해물과"
const strItem2 = strItem.slice(5, 9); // "백두산이"
const strItem3 = strItem.slice(10, 13); // "마르고"
const strItem4 = strItem.slice(14, 17); // "닳도록"

 

6. [repeate] 문자열 반복과 관련 메서드

---

💡 repeat() 메서드는 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환할 때 사용하는 함수입니다.

 

[ API Docuemnt ]

/**
 * str.repeat()의 속성
 * @param {number} count : 문자열을 반복할 횟수이며, 0과 양의 무한대 사이의 정수([0, +∞))입니다.
 * @return {string} : 현재 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열입니다
 */
str.repeat(count);

String.prototype.repeat() - JavaScript | MDN

 

[ 해당 메서드 활용하기 ]

/**
 * 기본 사용 방법
 */

// repeat() 메서드를 이용하며 해당 문자열을 반복합니다.
const star = '*';
const repeatMethodStr = star.repeat(5); // "*****"

 

7. [replace/replaceAll] 문자열 포함 문자 제외 관련 메서드

---

💡 replace() 메서드는 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환하는 데 사용합니다. (* 해당 패턴은 문자열이나 정규식이 될 수 있습니다.)
💡 replaceAll() 메서드는 어떤 패턴에 일치하는 모든 부분이 교체된 새로운 문자열을 반환하는 데 사용합니다. ( 해당 패턴은 문자열이나 정규식이 될 수 있습니다.)

 

[ API Document ]

/**
 * str.replace()의 속성
 * @param {string|RegExp} substr|regexp(pattern) : 정규식(RegExp) 객체 또는 리터럴 또는 newSubStr로 대체 될 문자열입니다.
 * @param {string|Function} newSubStr| function(replacement) : 첫번째 파라미터를 대신 할 문자열. 또는 주어진 regexp 또는 substr에 일치하는 요소를 대체하는 데 사용될 새 하위 문자열을 생성하기 위해 호출되는 함수입니다.
 * @return {string} : 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열입니다.
 */
str.replace(regexp|substr, newSubstr|function)

/**
 * str.replaceAll()의 속성
 * @param {string|RegExp} pattern : 문자열 또는 정규식 개체가 될 수 있습니다.
 * @param {string|Function} replacement : 문자열 또는 함수일 수 있습니다.
 * @return {string} : 현재 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열.
 */
replaceAll(pattern, replacement)

String.prototype.replace() - JavaScript | MDN

String.prototype.replaceAll() - JavaScript | MDN

 

[ 해당 메서드 활용하기 ]

/**
 * 기본 사용 방법
 */
const strItem = 'A.B.C';
// replace()으로 '.' 문자를 제외하기
const replaceMethodStr = strItem.replace('.', ''); // "AB.C"
// replaceAll()으로 '.' 문자를 모두 제외하기
const replaceAllMethodStr = strItem.replaceAll('.', ''); // "ABC"

/**
 * 응용 사용 방법
 */
// replace()으로 글로벌 정규식을 이용하여 '.' 문자를 모두 제거
const replaceMethodStr2 = strItem.replace(/\\./g, '');
console.log(replaceMethodStr, replaceAllMethodStr);

 

8. [concat] 문자열과 문자열을 합치기 관련 메서드

---

💡 concat() 메서드는 매개변수로 전달된 모든 문자열을 호출 문자열에 붙인 새로운 문자열을 반환하는데 사용됩니다.

 

[API Document]

/**
 * str.concat()의 속성
 * @param {string} string2...stringN : 합칠 문자열.
 * @return {string} : 주어진 문자열을 모두 붙인 새로운 문자열.
 */
str.concat(string2, string3[, ..., stringN])

String.prototype.concat() - JavaScript | MDN

 

[ 해당 메서드 활용하기 ]

/**
 * 기본 사용 방법
 */
const strItem = '안녕하세요';
const strItem2 = '반갑습니다';
strItem.concat(strItem2); // "안녕하세요 반갑습니다."

 

9. [match] 문자열이 일치하는지에 대해 찾는 메서드

---

💡 match() 메서드는 문자열이 정규식과 매치되는 부분을 검색에 사용됩니다.

 

[ API Document ]

/**
 * str.concat()의 속성
 * @param {RegExp} regexp : 정규식 개체입니다. RegExp가 아닌 객체 obj가 전달되면, new RegExp(obj)를 사용하여 암묵적으로 RegExp로 변환됩니다. 
 * @return {string} : 문자열이 정규식과 일치하면 일치하는 전체 문자열을 첫 번째 요소로 포함하는 Array를 반환한 다음 괄호 안에 캡처된 결과가 옵니다. 일치하는 것이 없으면 null이 반환됩니다.
 */
str.match(regexp)

String.prototype.match() - JavaScript | MDN

 

[ 해당 메서드 활용하기 ]

/**
 * 기본 사용 방법
 */
const strItem = 'ABBB.B.C.D.E.F.G.H.A';
// 일치하는 문자열 확인
const matchItem = 'D.E.F';
const matchMethodStr = strItem.match(matchItem);
if (matchMethodStr) {
	const { groups, index, input, length } = matchMethodStr;
	matchMethodStr[0]; // D.E.F
}

 

10. [search] 문자열이 일치하는지에 대한 찾는 메서드

---

💡 search() 메서드는 정규 표현식과 이 문자열 객체 간에 같은 것을 찾기 위한 검색을 실행한다.

 

[ API Document ]

/**
 * str.search()의 속성
 * @param {RegExp} regexp 정규 표현식 객체. non-RegExp 객체 obj 가 전달되면, 그것은 new RegExp(obj) 을 이용하여 RegExp 으로 암묵적으로 변환된다.
 * @return {number} : 정규표현식과 주어진 스트링간에 첫번째로 매치되는 것의 인덱스를 반환한다. 찾지 못하면 -1 를 반환한다.
 */
str.search(regexp)

String.prototype.search() - JavaScript | MDN

 

[ 해당 메서드 활용하기 ]

/**
 * 기본 사용 방법
 */
const strItem = 'ABBB.B.C.D.E.F.G.H.A';
const searchItem = 'D.E.F';
const result = strItem.search(searchItem); // 9

 

11. [toUpperCase / toLowerCase] 문자열을 대문자 혹은 소문자로 변경 메서드

---

💡 toUpperCase() 메서드는 문자열을 대문자로 변환해 반환하는 데 사용됩니다.
💡 toLowerCase() 메서드는 소문자로 변환된 호출 문자열 값을 반환하는 데 사용됩니다.

 

[ API Document ]

/**
 * str.toUpperCase()의 속성
 * @return {string} : 대문자로 변환한 새로운 문자열입니다.
 */
str.toUpperCase()

/**
 * str.toLowerCase()의 속성
 * @return {string} :소문자로 변환된 호출 문자열을 나타내는 새 문자열입니다.
 */
str.toLowerCase()

String.prototype.toUpperCase() - JavaScript | MDN

String.prototype.toLowerCase() - JavaScript | MDN

 

[ 해당 메서드 활용하기 ]

/**
 * 기본 사용 방법
 */
const lowerStr = 'hello';
lowerStr.toUpperCase(); // "HELLO"

const upperStr = 'HELLO';
upperStr.toLowerCase(); // hello

오늘도 감사합니다😀