궁금한 내용을 검색해보세요!
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
서근 개발노트
티스토리에 팔로잉
FRONT-END/JAVASCRIPT

(JAVASCRIPT) 단일 데이터 타입 - 문자열 타입 (String)

서근
QUOTE THE DAY

-
Written by SeogunSEOGUN

반응형

데이터 타입
중에 하나인 문자열 타입에 대해 알아보도록 하겠습니다.

문자열 타입

Javascript 에서 문자열을 사용하는 방법은 여러 가지가 있습니다. 

  1. "" 큰따옴표
  2. '' 작은따옴표
  3. `` back-quote
let string = '서근 개발 노트';
let string2 = "서근 개발 노트"
string = `서근 개발 노트 입니다.`
console.log(string);
console.log(string2);

/*
서근 개발 노트 입니다.
서근 개발 노트
*/

특수문자 출력

문자열 안에 작은 또는 큰따옴표를 사용하고 싶다면 밖에 오는 기호를 반전시켜주면 됩니다.

let name = '"서근 입니다."'
console.log(name)
name = "'미진 입니다.'"
console.log(name)

/*
"서근 입니다."
'미진 입니다.'
*/

Escape 표현

일반적인 출력 문자 외의 특수 문자는 이스케이프 표현을 사용해 출력할 수 있습니다.

코드 출력
\xxx 8진수 Latin-1 문자
\' 작은따옴표
\" 큰따옴표
\\ 역슬래시
\n ⭐️ 줄 바꿈
\r 줄 바꿈 (Window에서 썼던 방식)
\v 세로 탭
\t ⭐️
\b 백 스페이스
\f 폼 피드
\uXXXX 유니코드 코드포인트
\u{X} ... \u{XXXXXX} 유니코드 코드포인트 Experimental
\xXX Latin-1 문자

 
 
 

작은따옴표 와 큰 따옴표
일부 다른 프로그래밍 언어와 달리, JavaScript는 작은따옴표와 큰따옴표 문자열을 구분하지 않습니다. 따라서 위의 이스케이프 문자는 작은따옴표나 큰따옴표에서 상관없이 작동합니다.

역슬래시

예를들어 역슬래시를 사용하고 싶다면 \ 하나만 사용하는 것이 아닌 \\ 두 개를 사용해야 합니다.

let notice = '"역슬래시는 "\\" 과 같이 사용할 수 있습니다."'
console.log(notice)

//"역슬래시는 "\" 과 같이 사용할 수 있습니다."

줄 바꿈 & Tap 

줄 바꿈을 사용하려면 \n을 사용하면 되고, 띄어쓰기를 사용하려면 \t을 사용하면 됩니다.

 

여기서 \tTap과 같은 기능이라고 보시면 됩니다.

let name = '"서근 입니다."'
name = "안녕하세요.\n저의 블로그에\t찾아와주셔서 감사합니다."
console.log(name)

/*
안녕하세요.
저의 블로그에   찾아와주셔서 감사합니다.
*/

긴 문자열 리터럴

코드에 긴 문자열을 포함하는 경우, 자동으로 줄을 넘기는 대신 직접 여러 줄로 나뉘지만, 내용에는 지장이 없도록 해줄 수 있습니다.

 

1. + (en-US) 연산자

let longString = "안녕하세요 " +
"저의 블로그에 찾아와 주셔서 " +
"감사합니다";
console.log(longString) 

//안녕하세요 저의 블로그에 찾아와 주셔서 감사합니다

2. 역슬래시 \ 문자 사용

let longString = "안녕하세요 \
저의 블로그에 찾아와 주셔서 \
감사합니다";
console.log(longString) 

//안녕하세요 저의 블로그에 찾아와 주셔서 감사합니다

주의할 점은 역슬래시 뒤에 공백을 포함한 어떠한 문자가 와서는 안됩니다.

let longString = "안녕하세요 \ !
저의 블로그에 찾아와 주셔서 \
감사합니다";
console.log(longString) 

//[nodemon] app crashed - waiting for file changes before starting...

탬 플릿 리터럴

탬플릿 리터럴을 사용해 아래와 같은 복잡한 코드를 편하게 작성할 수 있습니다. 

let codeNumber = "1004";
let name = "서근";
let idCardInfo = "'안녕하세요 " + name + "님\n" + "당신의 코드 번호는, " + codeNumber + "입니다.'"
console.log(idCardInfo)

/*
'안녕하세요 서근님
당신의 코드 번호는, 1004입니다.'
*/

탬플릿 리터럴을 사용하기 위해서는 `` back-quote를 사용하고 데이터를 읽고 싶을 때는 ${}를 사용하여 변수 또는 표현식을 출력할 수 있습니다.

let codeNumber = "1004";
let name = "서근";
let idCardInfo = "'안녕하세요 " + name + "님\n" + "당신의 코드 번호는, " + codeNumber + "입니다.'"
console.log(idCardInfo)

/*
'안녕하세요 서근님
당신의 코드 번호는, 1004입니다.'
*/

idCardInfo = `'안녕하세요 ${name}님
당신의 코드 번호는, ${codeNumber}입니다.'`
console.log(idCardInfo)

/*
'안녕하세요 서근님
당신의 코드 번호는, 1004입니다.'
*/

오늘은 이렇게 데이터 타입 중에 하나인 문자열 타입에 대해 알아 보았습니다.

 

읽어주셔서 감사합니다🤟 


참고 문헌 REFERENCE
 

String - JavaScript | MDN

String 전역 객체는 문자열(문자의 나열)의 생성자입니다.

developer.mozilla.org

 


잘못된 내용이 있으면 언제든 피드백 부탁드립니다.


서근


위처럼 이미지 와 함께 댓글을 작성할 수 있습니다.