[자바스크립트 비기너] String 오브젝트

1. String 오브젝트 개요, 문자열 연결 방법, 프로퍼티 리스트

String 오브젝트

• 문자 처리를 위한 빌트인 오브젝트
• 문자 처리를 위한 함수와 프로퍼티가 포함되어 있다.

문자열 연결 방법

• 한 줄에서 연결 (ex. var book = "12" + "AB";)
• 줄을 분리하여 연결
  • +로 문자열 연결
  • 역슬래시()로 문자열 연결

    var concat =
    "abc \
              가나다라";
    console.log(concat); // abc 가나다라

프로퍼티 리스트

https://poiemaweb.com/js-string 참고

2. 문자열로 변환, 프리미티브 값 구하기

String()

• 파라미터 값을 String 타입으로 변환하여 반환한다.
• 값을 작성하지 않으면 빈 문자열을 반환한다.
• ("" + 123)도 숫자가 String 타입이 되지만 String(123) 형태가 가독성이 높다.

new String()

• String 인스턴스를 생성하여 반환한다.
• 파라미터 값을 String 타입으로 변환한다. 이때 파라미터 값이 프리미티브 값이 된다.

valueOf()

• String 인스턴스의 프리미티브 값을 반환한다.

3. length 프로퍼티, length 값 반환 논리

length 프로퍼티

• 문자 수를 반환한다.

var value = "ABC";
console.log(value.length); // 3
// Length 프로퍼티가 없는데 3이 출력된다.
// 자바스크립트 내부에서 인스턴스를 만든다.
// 그 인스턴스를 가지고 length 프로퍼티를 사용한다.
// 즉, value를 만나면 먼저 타입을 구한다.
// 그리고 각 타입에 맞는 인스턴스를 만드는 것이다.
// length와 [[PrimitiveValue]]는 둘 다 자바스크립트 엔진이 만드는 것이다.
// 단, [[PrimitiveValue]]는 [[]]로 감싸져 있기 때문에 외부가 아닌 내부에서 사용하겠다는 뜻이다. 그래서 valueOf()를 사용해야 값을 구할 수 있다.

• 문자열을 for문으로 문자 하나씩 읽을 수 있는 것은 인스턴스에 각각의 문자들로 분리가 되어있기 때문이다.
• value[k]와 같은 형태로 값을 구할 수 있다. 이때 k는 프로퍼티의 이름이다.

4. 화이트 스페이스 삭제

trim()

• 문자열 앞뒤의 화이트 스페이스를 삭제한다.
• trim()을 사용하면 내부에서 String 타입의 인스턴스가 만들어진다. 그래서 그 length도 구할 수 있다.
• 메소드 체인: value.trim().length처럼 .으로 함수, 프로퍼티 등을 이어서 작성할 수 있는 형태를 말한다.

5. 함수 호출 구조, proto 구조

toString()

• data 위치의 값을 String 타입으로 변환한다.
  => 문자열을 String 타입으로 변환한다. 왜?

toString() 함수가 필요한 이유

인스턴스를 만들 때 toString()이 인스턴스에 할당된다.

var obj = String;
var instance = new String("123");
// instance의 __proto__에 toString()이 존재한다.

var oneProto = instance.__proto__;
var oneString = oneProto.toString;
// oneProto에도 toString()이 존재한다.

var twoProto = instance.__proto__.__proto__;
// instance.__proto__의 __proto__에도 toString()이 존재한다.
// 그러나 __proto__는 타입이 Object이다.
// toString()이 두 개가 존재한다.

// 만약 String의 __proto__에 toString()이 없다면 자바스크립트는 아래의 __proto__에서 toString()을 찾는다.
// hasOwnProperty가 있는지 탐색한다.
// 계층적으로 내려가면서 호출할 함수를 찾는 것.

// String에 toString()이 없다면 __proto__(빌트인 오브젝트)로 내려간다.
// 빌트인 오브젝트는 key:value, String 오브젝트는 단일 값.
// toString()도 key:value에 맞춰서 그것을 문자열로 바꾸는 형태로 코드가 작성되어 있을 것이다.
// 이상한 모습으로 변환되지 않도록(key:value로 변환하지 않도록) 앞에서 toString() 함수를 잘라준 것.
// 우리가 개발하는 프로그램도 이런 계층적인 구조로 작성할 수 있다.

• 대부분의 빌트인 오브젝트에 toString()과 valueOf()가 있다.

JS 함수 호출 구조

• 우선 데이터 타입으로 오브젝트를 결정하고 오브젝트의 함수를 호출한다.
• toString(123)
  • 123을 파라미터에 작성한다.
  • 빌트인 오브젝트의 toString()을 호출한다. (두 번째 proto 단계)
  • key:value가 들어오지 않고 값만 들어왔기 때문에 [object Undefined]라는 결과가 출력된다.
  • 이를 방지하기 위해 빌트인 String 오브젝트에 toString() 함수가 있는 것이다.

6. 인덱스로 문자열 처리

charAt()

• 인덱스의 문자를 반환한다.
• 문자열의 길이보다 인덱스가 크면 빈 문자열을 반환한다.
• 일반적으로 존재하지 않으면 undefined를 반환한다.

var value = "sports";
console.log(value.charAt(1)); // 함수를 호출한 것
console.log(value[1]); // ES5부터 사용 가능한 형태, 프로퍼티 이름으로 값 구하는 것

console.log(value.charAt(12)); // ""
console.log(value[12]); // undefined

• 개념적으로 undefined 반환이 적절하다. undefined는 시맨틱적으로 인덱스 번째가 없다는 뉘앙스가 강하다.

indexOf()

• data 위치의 문자열에서 파라미터의 문자와 같은 첫 번째 인덱스를 반환한다.
• 값을 구하게 되면 더 이상 값을 구하지 않는다.
• 두 번째 파라미터를 작성하면 작성한 인덱스부터 검색한다.
• 같은 문자가 없으면 -1을 반환한다.

lastIndexOf()

• 뒤에서 앞으로 검색한다.
• 두 번째 파라미터를 작성하면 작성한 인덱스부터 검색한다.
• 같은 문자가 없으면 -1을 반환한다.
• 두 번재 파라미터가 0보다 작으면 -1을 반환한다.

7. 문자열 연결, 대소문자 변환

concat()

• data 위치의 값에 파라미터 값을 작성순서로 연결하여 문자열로 반환한다.
• String 인스턴스를 작성하면 프리미티브 값을 연결한다. (ex. console.log(obj.concat("ABC")))

toLowerCase(), toUpperCase()

• 대문자를 소문자로, 소문자를 대문자로 변환한다.

8. 문자열 추출

subString()

• 파라미터의 시작 인덱스부터 끝 인덱스 직전까지 반환한다.
• 두 번째 파라미터를 작성하지 않으면 반환 대상의 끝까지 반환한다.
• 두 번째 파라미터 값이 전체 length보다 크면 전체 문자열 length를 사용한다. 즉, 끝까지 반환한다.
• 파라미터 값이 음수이면 0으로 간주한다.
• 첫 번째 파라미터 값이 두 번째보다 크면 파라미터 값을 바꿔서 처리한다.
• NaN는 0으로 간주한다.

substr()

• 파라미터의 시작 인덱스부터 지정한 문자 수를 반환한다.
• 첫 번째 파라미터 값이 음수이면 length에서 파라미터 값을 더해서 시작 인덱스로 사용한다.
• 두 번째 파라미터를 작성하지 않으면 양수 무한대로 간주한다.

slice()

• 파라미터의 시작 인덱스부터 끝 인덱스 직전까지 반환한다.
• 첫 번째 파라미터 값을 작성하지 않거나 NaN이면 0으로 간주한다.
• 두 번째 파라미터를 작성하지 않으면 length를 사용하고, 값이 음수이면 length에 더해 사용한다.

9. 정규 표현식을 사용할 수 있는 함수

match()

• 매치 결과를 배열로 반환한다.
• 매치 대상에 정규 표현식의 패턴을 적용하여 매치하고 결과를 반환한다.
• 문자열을 작성할 수 있고, 엔진이 정규 표현식으로 변환하여 매치한다.
• 파라미터에 정규 표현식을 사용할 수 있다.
• 정규 표현식
  • 문자열을 패턴으로 매치한다.
  • 패턴 형태: ^, $, *, + 등
• 일치는 하나의 개념, 매치는 다수의 개념이다.

replcae()

• 매치 결과를 파라미터에 작성한 값으로 대체하여 반환한다.
• 두 번째 파라미터에 함수를 작성하면 먼저 함수를 실행하고 함수에서 반환한 값으로 대체한다.

search()

• 검색된 첫 번째 인덱스를 반환한다.
• 매치되지 않으면 -1을 반환한다.
• indexOf()는 하나만 매치할 수 있지만 saerch()는 정규표현식을 이용해 다양한 조건을 작성할 수 있다.

split()

• 분리 대상을 분리자로 분리하여 배열로 반환한다.
• 분리자는 반환되지 않는다.
• 분리자에 빈 문자열을 작성하면 문자를 하나씩 분리하여 반환한다.
• 분리자를 작성하지 않으면 분리 대상 전체를 하나의 배열로 반환한다.
• 두 번째 파라미터에 반환 수를 작성한다.

10. Unicode 관련 함수

charCodeAt()

• 인덱스 번째 문자를 유니코드의 코드포인트 값을 반환한다.
• 인덱스가 문자열 길이보다 크면 NaN를 반환한다.

fromCharCode()

// String 오브젝트 원본에 속한 함수
console.log(String.fromCharCode(49, 65, 97, 44032)); // 1Aa가

• 파라미터의 유니코드를 문자열로 변환하고 연결하여 반환한다.
• 작성하지 않으면 빈 문자열을 반환한다.

localeCompare()

• 값을 비교하여 위치를 나타내는 값으로 반환한다.
• 위치 값: 1(앞), 0(같음), -1(뒤)
• Unicode 사전 순으로 비교한다.