Colin's Blog
[JavaScript] 2-3. JavaScript String Type

JavaScript String Type

문자열 타입 (String Type)

컴퓨터 분야에서 문자의 나열(String)이라는 뜻에서 문자열을 String이라고 부릅니다.
string 타입을 통해 일반적인 텍스트 데이터를 다룰 수 있습니다.
JavaScript 의 문자열은 내부적으로 유니코드를 통해 표현되므로,
별 걱정없이 한국어를 비롯한 대부분의 언어를 문자열로 사용할 수 있습니다.

typeof "이건무슨타입"; //  String(문자열)

let 내나이는 = 29;
console.log(내나이는); //  29

/* 변수명을 한글로 쓸 수!도 있습니다.
   단, 규칙성이라던가 에러가 날 소지가 다분해서 가급적 한글은 피하는게 좋습니다 */



ASCII, UTF-8, UTF-16

유니코드란? 전 세계의 모든 문자를 일관되게 표현하고 다룰 수 있도록 산업 표준으로
문자 집합, 문자 인코딩, 문자 정보 데이터베이스, 문자들을 다루기 위한 알고리즘을 포함하고 있으며
유니코드는 값을 나타내기 위해 코드 포인트를 사용합니다.

그렇다면 UTF-8 과 UTF-16 의 차이는?



문자열 리터럴 (String Type Literal)

1. 'f' - 작은 따옴표를 이용
2. "d" - 큰 따옴표를 이용
3. `s` - 백틱을 이용 : Template Literal - Multi Line String를 얻는 효과

세가지 방법이 있는데 어떠한 방법을 써도 실제 저장되는 값은 동일합니다.



템플릿 리터럴 (Template Literal)

ES2015(a.k.a ES6)에서 도입된 템플릿 리터럴은 문자열 리터럴의 일종으로 추가적인 기능을 지원합니다.
템플릿 리터럴을 사용하려면 백틱(backtick)으로 문자열을 둘러싸면 됩니다.<br/> 템플릿 리터럴을 사용하면 여러줄을 작성할때 스트링 사이를 +로 이어줘야 했는데<br/> `으로 감싸주기만 해도 Multi Line String 을 얻어서 단순 코드상의 줄바꿈으로도
줄바꿈이 지원되고, 이스케이핑 없이 문자열 내에서 따옴표를 사용할수 있습니다.

let templateLiteral = `This is Template Literal`;

템플릿 리터럴의 내삽 기능을 이용하면 동적으로 문자열을 생성하는 일을 쉽게 할 수 있습니다.

const name1 = "moong2";
const name2 = "min.zzz";
const sentence = `${name1} meets ${name2}!`;
console.log(sentence);

// 일반적인 문자열로 작성하려면 이렇게 +를 이용하여 작성하면됩니다.
name1 + "meets" + name2 + "!";

템플릿 리터럴은 특이한 형태의 함수 호출 기능을 지원하는데, 이를 tagged template literal이라고 합니다.
함수(function)을 이용하여 template literals 의 출력을 변형시키는데 사용합니다.
사용방법은 템플릿 문자열의 백틱앞에 태그명을 명시합니다.

// 사용방법
let favoriteFood = food`sushi`;

주로 다른 언어를 JS 와 통합할 때 사용하기도 하지만, 라이브러리 제작자가 아니라면 함수를 직접적으로 만드는 일은 없습니다.



이스케이프 문자열 (Escape Sequence)

JS 는 특수 문자를 문자열에 넣거나 혹은 직접 유니코드 코드포인트를 사용해서 문자를 넣을 수 있는 이스케이프 문자열을 제공합니다.
|표기법|문자| |——|——| |'|홑따옴표| |"|쌈따옴표| |\|백슬래시| |\n|라인피드| |\r|캐리지리턴| |\t|탭| |\uXXXX|유니코드 문자| |\u{X..}|유니코드 문자| |$|달러| |`|백틱|

이 이스케이프 문자열을 문자열 안에서 사용할 수 있습니다.

console.log("lorem 'ipsum'"); //  lorem 'ipsum'
console.log("line\nfeed"); //  line (줄바꿈 == <br/>)feed
console.log("\uD55C\uAE00"); // 한글
console.log("\u{1F435}"); //  이모티콘

다만 리터럴을 위해 사용한 따옴표와 다른 종류의 따옴표들은 문자열 내에서 자유롭게 쓸 수 있으므로
굳이 이스케이프 문자열로 표기해주어야 할 필요가 없습니다.

"'lorem' 'ipsum'";
'"lorem" `ipsum`';
`"lorem" 'ipsum'`;
//리터럴로 사용한 따옴표와 같은 것을 사용하면 리터럴이 풀려요ㅠㅠ

라인 피드(line feed)와 캐리지 리턴(carage return)은 개행 문자로, 우리가 엔터를 누를 때 입력되는 문자입니다.
맥과 리눅스에서는 LF, 윈도우에서는 CR+LF가 개행문자로 사용됩니다.



문자열과 연산자

숫자에서만 아니라 문자열에서도 다양한 연산자를 사용할 수 있습니다.

// 문자열 연결하기
"hello" + "it'me"; //  hello it'me

// 등호 비교
"원빈" != "내얼굴"; //  true...ㅠㅠ
"햄버거" == "햄버거"; //   true

// 유니코드 코드포인트 비교, 앞에서부터 한 글자씩 차례대로 비교합니다.
"a" < "b"; //  true
"aaa" < "abc"; //  true
"a" < "F"; //  false
"피자" < "피지"; //  true
"2" < "10"; // false

// 문자열을 배열로 바꾸기
[..."pizza"]; //    ['p','i','z','z','a']

유니코드 코드포인트 비교는 사전순 비교가 아니므로 주의가 필요합니다.(가급적 사용하지 않는게 좋습니다.)
사전순으로 비교하고 싶을 때는 localeCompare메소드를 사용해야 합니다.

"b".localeCompare("a"); // 1
"b".localeCompare("b"); // 0
"b".localeCompare("c"); // -1
"b".localeCompare("Z"); // -1
"문자열".localeCompare("공부중"); // 1

"기준".localeCompare("비교대상"); // 같으면 0, 비교대상의 값이 크면 -1, 비교대상의 값이 작으면 1



문자열 속성 메소드

숫자에서만 아니라 문자열에서도 속성과 메소드를 사용할 수 있습니다.

// 문자열의 길이
"hi".length; //  2 - 기존과 동일

// 여러 문자열 연결하기
"hi".concat("fun", "javascript"); //  'hifunjavascript'

// 특정 문자열 반복하는 새 문자열 생성하기
"*".repeat(5); //  '*****'

// 특정 문자열이 포함되어 있는지 확인하기
"hi there".includes("hi"); //  true
"hi there".startsWith("h"); //  true
"hi there".endsWith("ere"); //  true
"hi there".search("there"); //  3 (해당하는 문자열이 찾으려고 하는 대상에 몇 번째 문자열인지 찾아줍니다.) = indexOf();

// 문자열의 특정 부분 바꾸기
"hi there".replace("there", "gh school"); //  'high school'

// 문자열의 일부를 얻어오기
"pizza".slice(2, 4); //  'zz' (2번째 문자열부터 4번째전까지 슬라이스를 합니다, 단 시작하는 문자열은 0부터 넘버링이 됩니다.)

// 좌우 공백문자 제거한 새 문자열 생성하기
"    hi     ".trim(); //  'hi'
"    hi     ".trimLeft(); //  'hi      '
"    hi     ".trimRight(); //  '     hi'

// 좌우 공백문자를 추가한 새 문자열 생성하기
"hi".padStart(8); //  '      hi'
"hi".padEnd(8); //  'hi      '

// 문자열을 특정 문자를 기준으로 잘라 배열로 바꾸기
"i2like2pizza".split("2"); //  ['i', 'like', 'pizza']
"note-book".split(""); //  ['n','o','t','e','-','b','o','o','k']

// 모든 문자를 소문자 혹은 대문자로 변환한 새 문자열 만들기
"hi hello javascript".toUpperCase(); //  'HI HELLO JAVASCRIPT'
"HI HELLO JAVASCRIPT".toLowerCase(); //  'hi hello javascript'



2. Today I Found Out

문자열 타입에 대해서 공부를 하였습니다.
기존에 알던 기능이 있는 것외에 추가적으로 기능이 더 생겨서
흥미롭게 또 재밌게 봤습니다.
다양한 기능이 있다는 것을 파악헀으니 이것을 가지고 무엇을 만들 수 있을지
좀 더 생각해봐야할 것 같습니다.
재밌게 공부하였습니다.



3. refer

https://helloworldjavascript.net/pages/140-string.html

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

http://12bme.tistory.com/193

http://hong.adfeel.info/frontend/%ED%85%9C%ED%94%8C%EB%A6%BF-%EB%A6%AC%ED%84%B0%EB%9F%B4template-literals/

© 2018 Colin. All rights reserved.