[Javascript] String(문자열),템플릿 리터럴,String 메소드

신세원·2020년 9월 11일
0

javascript

목록 보기
13/19
post-thumbnail
post-custom-banner

javascript에서 기본적인 string에 대해 알아보자

String이란 무엇인가?

string 이란 다른 말로 문자열 이라고 표현되며, 컴퓨터 프로그래밍 형식 언어 이론에서 기호의 순차 수열이라고 불리우며, 그리고 문자열이 소스코드에 보이면 그 문자열을 string literal 이라고 일컫는다.

문자열 선언 방법

javascript에서 문자열을 선언하는 방법이 크게 3가지가 있다.
1. 문자열 리터럴
2. String 전역객체
3. 템플릿 리터럴

//문자열 리터럴
const str = "문자열"; //문자열 리터럴 생성
const text1 = "text1";

//string 전역객체
const strObj = new String(str); // 문자열 객체 생성
const string = String(123); // '123'

// 템플릿 리터럴
const template = `${template}_text` // template_text

문자열의 형태

javascript에서 문자열은 배열의 형태로 참조 할 수 있다.
length를 가지고, index의 형태로 접근 할 수 있다.

const text = '1234';
console.log(text)
// 1234
console.log(text.length)
// 4

const stringObj = new String('123');
console.log(stringObj);
// String
//  0: "1"
//  1: "2"
//  2: "3"
//  length: 3
//  __proto__: String
//  [[PrimitiveValue]]: "123"

문자열은 한번 선언되면 변할 수가 없다.
변수의 문자열을 바꾼다면, 기존 문자열을 제거하고 다시 선언한다.

Template literals(템플릿 리터럴)

템플릿 리터럴은 내장된 표현식을 사용하는 문자열 리터럴이다.
템플릿 리터럴은 런타인 시점에 일반 자바스크립트 문자열로 처리/반환된다.

템플릿 리터럴은 ``(백틱)으로 감싸줍니다. 아래 구문을 보면서 하나하나 알아가보도록 하자.

Expression interpolation(표현식 삽입)

ES6 이전엔 표현식을 다음과 같이 일반 문자열 안에 집어 넣었다.

let a = 20;
let b = 9;
let c = "자바스크립트";
let str = "저는 " + (a + b) + "살이고 " + c + "를 좋아합니다.";
console.log(str);   //저는 29살이고 자바스크립트를 좋아합니다.

그렇지만 템플릿 리터럴에서는 아래와 같이 $와 중괄호{}를 사용하여 표현식을 표기할 수 있습니다.

``(백틱)으로 감싸주세요 이거 안해서 헤메시는분 많아요!

let a = 20;
let b = 9;
let c = "자바스크립트";
let str = `저는 ${a+b}살이고 ${c}를 좋아합니다.`;
console.log(str);   //저는 29살이고 자바스크립트를 좋아합니다.

가독성이 좋아진걸 알수있다.

String Prototype

String Prototype 에는 많은 메서드가 존재한다.

대표적으로 많이 쓰이는 몇가지를 정리해보았다.

const string = 'string'

console.log( 'string'.concat('_concat') );
// 문자열과 인자를 합친다.
// "String_concat"

console.log( 'String'.toLowerCase() );
// 문자열을 소문자로 반환한다.
// "string"

console.log( 'String'.toUpperCase() );
// 문자열을 대문자로 반환한다.
// "STRING"

console.log( '  string  '.trim() );
// 문자열의 앞뒤의 빈문자열을 제거하고 반환한다.
// "string"

console.log( '12345'.substring(1, 3) );
console.log( '12345'.slice(1, 3) );
// 문자열의 시작위치와 종료위치 이전에 맞는 문자열을 반환한다.
// "23"

console.log( 'string'.includes('ing') );
// 문자열이 존재하는지 boolean 을 반환한다.
// true

console.log( 'string'.indexOf('ing') );
// 문자열이 시작되는 위치를 반환한다.
// 3

console.log( 'string'.search(/ing/g) );
// 정규식에 맞는 문자열이 시작되는 위치를 반환한다.
// 3

console.log( '1,2,3'.split(',') );
// 주어진 문자를 기준으로 구분한 배열 반환한다.
// ["1", "2", "3"]

console.log( '123123123'.match(/123/g) );
// 정규식에 맞는 문자 배열 반환한다.
// ["123", "123", "123"]

console.log( '123'.repeat(3) );
// 반복되는 문자열을 반환한다.
// "123123123"

console.log( '123123123'.replace(/123/g, '321') );
// 정규식에 맞는 문자열을 변환하여 반환한다.
// "321321321"
profile
생각하는대로 살지 않으면, 사는대로 생각하게 된다.
post-custom-banner

0개의 댓글