[JavaScript (12)] Javascript String 객체, String 메소드(replace, substr, split, concat 등)

[JavaScript (12)] Javascript String 객체, String 메소드(replace, substr, split, concat 등)

안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 객체 - String ] 입니다. : ) 

 

 

▶ 1. String 객체 생성 방법

 - Javascript 에서 문자열은 간단하게 2가지 방법으로 생성 가능 하다.

1) 큰따옴표(""), 작은따옴표(''), backtick(``) 
ex)

var 큰따옴표 = "큰따옴표";
var 작은따옴표 = "작은따옴표";
var 백틱 = `백틱`; // 백틱은 나중에 템플릿 리터럴 방식을 공부할때 자세히 알아보자.
console.log(큰따옴표);
console.log(작은따옴표);
console.log(백틱);
typeof 큰따옴표; // string
큰따옴표.length; // 4 (문자열의 length 프로퍼티는 byte가 아니라 문자의 수)
작은따옴표.length; // 5
백틱.length; // 2

 

2) new 연산자 사용 

 - 문자열 값을 감싸고 있는 래퍼(wrapper) 객체가 생성된다.

ex)

var a = new String("테스트String");
console.log(a);
typeof a; // object

▶ 2. String 메소드

1) String.fromCharCode()

 - 쉼표로 구분되며, 유니코드에 해당하는 문자들로 구성된 문자열을 리턴 한다. 
ex) 

String.fromCodePoint(65); // A
String.fromCodePoint(122); // z
String.fromCodePoint(72, 105); // Hi

▶ 3. String.prototype 메소드

1) String.prototype.indexOf

 - 인수로 전달한 문자열을 대상 문자열에서 검색하여 처음 발견된 곳의 index를 리턴
 - 2번째 인수 전달시 fromIndex에서부터 정방향으로 검색.
 - 발견하지 못한 경우 -1
 - 문법 : str.indexOf(searchString[, fromIndex])
ex)

var a = "String Test!";

console.log(a.indexOf('!')); // 11, !의 위치 리턴
console.log(a.indexOf('t')); // 1, 처음 발견된 t위치 리턴
console.log(a.indexOf('t', 2)); // 10, 2번째 index 이후 처음 발견된 t위치 리턴
console.log(a.indexOf('god')); // -1, 결과 없음

 

2) String.prototype.lastIndexOf

 - 인수로 전달한 문자열을 대상 문자열에서 검색하여 마지막으로 발견된 곳의 index를 리턴
 - 2번째 인수 전달시 fromIndex에서부터 역방향으로 검색.
 - 발견하지 못한 경우 -1
 - 문법 : str.lastIndexOf(searchString[, fromIndex])
ex)

var a = "String Test!";
console.log(a.lastIndexOf('!')); // 11, !의 위치 리턴
console.log(a.lastIndexOf('t')); // 10, 마지막으로 발견된 t위치 리턴
console.log(a.lastIndexOf('t', 2)); // 10, 2번째 index 이전 마지막으로 발견된 t위치 리턴
console.log(a.lastIndexOf('god')); // -1, 결과 없음

 

3) String.prototype.replace
 - 첫번째 인수로 전달한 문자열(or 정규표현식)을 대상 문자열에서 검색하여 두번째 인수로 전달한 문자열(or 함수)로 변경 한다.
 - 결과가 여러개인 경우 첫번째 검색된 문자열만 치환 한다.
 - 문법 : str.replace(searchValue, replacer)
ex)

var name = "Hello! god!";
var hp = "010-1234-5678";
var hp2 = "010 -1234 - 5678";

// 첫번째 문자열 변경
console.log(name.replace('god', 'goddaehee'));
console.log(hp.replace('-', '')); // 0101234-5678, 첫번째 '-'만 제거 되었다.

/**** 정규표현식 ****
** g(Global) : 문자열 내의 모든 패턴을 검색한다.
** i(Ignore case) : 대소문자를 구별하지 않고 검색한다.
*****************/
console.log(hp.replace(/-/gi, '')); // 0101234-5678, 모든 '-'가 제거 되었다.
console.log(hp2.replace(/ /gi, '')); // 01012345678, 공백제거

// replacer에 함수를 사용 가능하다.
console.log(hp.replace(/-/gi, function (match) {
  return match.replace('-', '');
}));

// 전화번호 마스킹 예제
console.log(hp.replace(/-[0-9]{4}-/g, "-****-"));

4) 문자열 추출 메소드
4.1) String.prototype.substring(startIndex[, endIndex])
 - 첫번째 인수 index부터 두번째 인수 index 에 해당하는 문자의 바로 이전 문자까지
 - 인수가 음수, NaN 인경우엔 0으로 처리한다.
 - 첫번째 인수 < 두번째 인수 (첫번째 인수가 큰 경우는 두 인수가 교환)
 - 두번째 인수 생략시 끝까지 반환한다.
ex)

var a = '012345678';
console.log(a.substring(1, 7)); // 123456
console.log(a.substring(7, 1)); // 123456
console.log(a.substring(2)); // 2345678
console.log(a.substring(undefined)); // 012345678

 

4.2) String.prototype.slice(startIndex[, endIndex])
 - substring과 동일하지만, 음수의 인수를 전달 가능하다.
 - 음수로 전달된 인덱스는 문자열의 뒤에서부터 시작한다.
ex)

var a = '012345678';
console.log(a.slice(1, 7)); // 123456
console.log(a.slice(7, 1)); // 123456
console.log(a.slice(2)); // 2345678
console.log(a.slice(undefined)); // 012345678
console.log(a.slice(-4, -1)); // 567
console.log(a.slice(-4, -2)); // 56

 

4.3) String.prototype.substr(startIndex[, length])
 - 문자열에서 특정 부분만 골라낼 때 사용하는 메소드 이다.
 - 첫번째 인수에서부터 length 만큼 추출하며, length가 생략된 경우 끝까지 반환한다.
ex)

var a = '012345678';
console.log(a.substr(1, 5)); // 12345
console.log(a.substr(2, 3)); // 234
console.log(a.substr(3)); // 345678

 

5) String.prototype.split(string(or RegExp)[, number]) 
 - String 인스턴스를 구분자(separator)를 기준으로 나눈 후, 나뉜 문자열을 하나의 배열로 반환 한다.
 - 인수가 없는 경우 : 전체 문자열을 길이가 1인 배열로 반환
 - 인수가 
ex)

var a = "한라산|백두산|설악산|지리산|북한산";
var arr = a.split("|");
console.log(arr); // (5) ["한라산", "백두산", "설악산", "지리산", "북한산"]
console.dir(arr); // Array(5)
console.log(a.split(/\|/)); // 정규식으로 분리 (5) ["한라산", "백두산", "설악산", "지리산", "북한산"]

var b = "what is this?";
console.log(b.split('')); // 각각의 문자를 모두 분리한다. (13) ["w", "h", "a", "t", " ", "i", "s", " ", "t", "h", "i", "s", "?"]
console.log(b.split(' '));  // 공백으로 구분하여 배열로 반환한다. (3) ["what", "is", "this?"]
console.log(b.split(' ', 2));  // 공백으로 구분하여 배열로 반환한다.요소수는 2개로 제한 (2) ["what", "is"]

 

6) String.prototype.concat(str1[,str2,...,strN])
 - 인수로 전달한 문자열을 연결하여 반환한다.
 - +, += 할당 연산자를 사용하여 문자열을 연결하는 것에 더 익숙할 것이다.

ex)

var str1 = "안녕하세요.";
var str2 = "좋은하루 입니다.";

console.log(str1.concat(str2)); // 안녕하세요.좋은하루 입니다.
console.log(str1 + str2); // 안녕하세요.좋은하루 입니다.
console.log("안녕하세요.".concat("좋은하루 입니다.", "수고하세요.")); // 안녕하세요.좋은하루 입니다.수고하세요.

 

7) 문자열의 대소문자 변환
7.1) String.prototype.toUpperCase
 - 대상 문자열의 모든 문자를 대문자로 변경
ex)

var a = "hello world!";
console.log(a.toUpperCase()); // HELLO WORLD!

 

7.2) String.prototype.toLowerCase
 - 대상 문자열의 모든 문자를 소문자로 변경
ex)

var a = "Hello World!";
console.log(a.toLowerCase()); // hello world!

 

8) String.prototype.trim
 - 대상 문자열 양쪽 끝에 있는 모든 공백과 줄 바꿈 문자(LF, CR 등)를 제거하고 문자열을 리턴한다.
ex)

var a = "  안녕하세요.  좋은하루  입니다.  수고하세요!  ";
console.log(a.trim()); // 안녕하세요.  좋은하루  입니다.  수고하세요!

 

9) 지정 위치 문자 반환 메소드
9.1) String.prototype.charAt(number)
 - String 인스턴스로 전달한 인덱스에 위치한 문자를 반환 한다.
 - 인덱스가 문자열을 넘어갈 경우 빈 문자열 반환한다.
ex)

var a = "abcdefg";
a.charAt(0);	// a
a.charAt(3);	// d
a.charAt(10);	// "", 빈 문자열을 반환
a.charAt(-1);	// "", 빈 문자열을 반환

 

9.2) String.prototype.charCodeAt()
 - String 인스턴스로 전달한 인덱스에 위치한 문자를 UTF-16 코드로 반환 한다.
ex)

var a = "abcdefg";
a.charCodeAt(0);	// 97
a.charCodeAt(3);	// 100
a.charCodeAt(10);	// NaN
a.charCodeAt(-1);	// NaN

 

9.3) String.prototype.charPointAt
 - String 인스턴스로 전달한 인덱스에 위치한 문자를 유니코드 코드 포인트(unicode code point)로 반환 한다.
 - 현재 대부분의 브라우저에서 지원하지 않음.

 

10) String.prototype.repeat(number)
 - 인수로 전달한 숫자만큼 반복해 연결한 새로운 문자열을 반환 한다.
 - 인수가 number : 0 인경우 빈문자열 리턴
 - 인수가 음수 : Uncaught RangeError: Invalid count value
ex)

var a = "ab|";
console.log(a.repeat(0)); // 
console.log(a.repeat(2)); // ab|ab
console.log(a.repeat(-1)); // Uncaught RangeError: Invalid count value

 

11) String​.prototype​.includes(string[, number])
 - 인수로 전달한 문자열이 포함되어 있는지를 확인하여 불린으로 리턴한다.
 - number는 검색 index 위치
ex)

var a = "abcdefg";
console.log(a.includes('b')); // true
console.log(a.includes(' ')); // false
console.log(a.includes('')); // true

 

12) String​.prototype​.startsWith(string[, number])
 - 인수로 전달한 문자열로 시작하는지 확인하여 불린으로 리턴한다.
 - number는 검색 index 위치
ex)

var a = "abcdefg";
console.log(a.startsWith('b')); // false
console.log(a.startsWith('ab')); // true
console.log(a.startsWith('ab', 1)); // false
console.log(a.startsWith('bcd', 1)); // true

 

13) String​.prototype​.endsWith(string[, number])

 - 인수로 전달한 문자열로 끝나는지 확인하여 불린으로 리턴한다.
 - number는 검색 index 위치
ex)

var a = "abcdefg";
console.log(a.endsWith('b')); // false
console.log(a.endsWith('g')); // true
console.log(a.endsWith('fg')); // true

 

14) 이외 메소드

 - search() : 인수로 전달받은 정규 표현식에 맞는 문자(or 문자열)이 처음으로 등장하는 위치의 인덱스를 반환한다.
 - match() : 인수로 전달받은 정규 표현식에 맞는 문자(or 문자열)을 찾아서 하나의 배열로 반환한다.
 - localeCompare() : 인수로 전달받은 문자열과 정렬 순서로 비교하여 그 결과를 정수 값으로 반환한다.
 - normalize() : 해당 문자열의 유니코드 표준화 양식(Unicode Normalization Form)을 반환 한다.