Changseon Shin

Changseon Shin

WannaBe Web Front-end Developer

[Day 17] string 타입 + boolean 타입

string 타입

  • 템플릿 리터럴 (Template Literal)

    • 문자열 리터럴의 일종으로, ES2015에서 도입되었다. backtick(`)으로 문자열을 둘러싸서 사용한다.
    • 템플릿 리터럴의 내삽(interpolation) 기능을 이용하면, 문자열을 동적으로 생성하는 코드를 쉽게 작성할 수 있다. - ${}
    • 여러 줄로 이루어진 문자열을 쉽게 표현할 수 있다는 장점이 있다.
    • 특수한 형태의 함수 호출 기능을 지원한다. 이를 ‘tagged template literal’ 이라고 한다. -> 주로 다른 언어를 Javascript와 통합할 때 사용한다.

  • Escape Sequence

    • 특수문자를 문자열에 넣거나, 직접 유니코드 코드포인트를 사용해서 문자를 넣을 수 있도록 해준다.

      표기법 문자
      \' 홑따옴표
      \" 쌍따옴표
      \\ 백슬래시
      \n 라인 피드(LF)
      \r 캐리지 리턴(CR)
      \t 탭
      \uXXXX 유니코드 문자
      \u{X...} 유니코드 문자
      \$ 달러

    • 윈도우에서 Enter를 입력할 경우 \r\n (CRLF)값이 입력된다. 그러나 맥이나 리눅스에서는 \n (LF)값이 입력된다. 같은 Enter키여도 입력 값이 다르기 때문에 호환성 문제가 발생할 수 있다. (웹에서는 LF(Line Feed)를 쓰는 것이 관례다.)

    • 유니코드 모음 사이트

  • 문자열과 연산자

    • 문자열과 숫자가 섞여 있을 경우 연산 순서에 주의해야 한다.

      'number' + 1 + 3	// 'number13'
1 + 3 + 'number'	// '4number'
// 숫자는 왼쪽부터 묶어서 계산하기 때문에 숫자가 먼저 연산된다.

    • 문자열 간의 부등호 비교는 유니코드 코드포인트를 비교한다.

      'a' < 'b'	// true
'aaa' < 'abc'	// true
'a' < 'Z'	// false
'한글' < '한국어'	//false
'2' < '10'	// false
    
// 유니코드 코드포인트 비교는 사전순 비교가 아니라 맨 앞글자 부터 한글자씩 비교한다는 것을 주의해야 한다.

    • 유니코드 코드포인트를 사전순으로 비교하려면 localeCompare 메소드를 사용해야 한다.

      'b'.localeCompare('a'); // 1
'b'.localeCompare('b'); // 0
'b'.localeCompare('z'); // -1
'b'.localeCompare('Z'); // -1
'가나다'.localeCompare('마바사'); // -1

    • 문자열을 배열로 바꾸기

      [...'hello'];	// ['h', 'e', 'l', 'l', 'o']

  • 속성 및 메소드

    • string 타입도 wrapper object의 속성과 메소드를 사용할 수 있다.

      // 문자열의 길이 알아내기
'hello'.length;	// 5
    
// 여러 문자열 연결하기
'hello'.concat('fun', 'javascript')	// 'hellofunjavascript'
    
// 특정 문자열을 반복하는 새 문자열 생성하기
'*'.repeat(3);	// '***'
    
// 특정 문자열이 포함되어 있는지 확인하기
'hello javascript'.includes('hello');	// true
'hello javascript'.startsWith('he');	// true
'hello javascript'.endsWith('ript');	// true
'hello javascript'.indexOf('java');		// 6
    
// 문자열의 특정 부분을 바꾼 새 문자열 생성하기
'hello javascript'.replace('java', 'type'); // 'hello typescript'
    
// 문자열의 일부를 잘라낸 새 문자열 생성하기 (원본 문자열을 변경하지는 않는다.)
'hello'.slice(2, 4); // 'll'
    
// 좌우 공백문자를 제거한 새 문자열 생성하기
'   hello  '.trim(); // 'hello'
'   hello  '.trimLeft(); // 'hello  '
'   hello  '.trimRight(); // '   hello'
    
// 좌우 공백문자를 추가한 새 문자열 생성하기
'hello'.padStart(8); // '   hello'
'hello'.padEnd(8); // 'hello   '
    
// 문자열을 특정 문자를 기준으로 잘라 새 배열 생성하기
'hello!fun!javavscript'.split('!'); // ['hello', 'fun', 'javascript']
'hello'.split(''); // ['h', 'e', 'l', 'l', 'o']
    
// 모든 문자를 소문자, 혹은 대문자로 변환한 새 문자열 생성하기
'Hello JavaScript'.toLowerCase(); // 'hello javascript'
'Hello JavaScript'.toUpperCase(); // 'HELLO JAVASCRIPT'

boolean 타입

  • ‘진리값’ 이라고도 부른다. 프로그래밍에서의 진리값은 어떤 조건이 참(true)인지 거짓(false)인지를 나타내기 위해 사용한다.

  • 삼항 연산자 (ternary operator)

    true ? 1 : 2; // 1
false ? 1 : 2; // 2
    • if ~ else 문과 다른 점
      • 삼항 연산자는 표현식이지만 if ~ else 문은 표현식이 아니기 때문에 변수 or 상수에 대입할 수 없다.
      • if ~ else 문은 {} 안에서 여러 구문을 실행할 수 있지만, 삼항 연산자는 여러 구문이 아닌 하나의 표현식만 실행할 수 있다.

  • truthy & falsy

    • boolean 타입이 와야 하는 자리에 다른 타입의 값이 와도 에러가 나지 않기도 한다.
    • 어떤 값들은 true로, 어떤 값들은 false로 취급되는데, true로 취급되는 값들을 truthy, false로 취급되는 값들을 falsy라고 부른다.
    • falsy 로 취급되는 값들
      • false
      • null
      • undefined
      • 0
      • NaN
      • ’’ (empty)
    • falsy를 제외한 모든 값들은 truthy 로 취급된다.

  • 다른 타입의 값을 진리값으로 변환하기

    • 어떤 값을 명시적으로 boolean 타입으로 변환해야 할 때 이러한 방법을 사용한다.
    !!'hello';	// true	(truthy를 true로)
!!NaN;	// false (falsy를 false로)
Boolean('hello');	// true

댓글남기기

참고