WeniVooks

검색

JavaScript 에센셜

원시타입과 문자열

1. 원시타입 (Primitive Types)

원싱타입은 가장 기본적인 데이터 타입으로, 단일 값을 저장합니다. 원시타입의 특징은 가리키고 있는 값의 변경이 불가능한 불변성(immutable) 을 가진다 것입니다.

let name = 'weniv'; console.log(name[1]); // 0번째 값을 불러옵니다. name[1] = 'a'; // 바꿔보려 시도하지만, 바뀌지 않습니다.

2. 문자열 (String)

문자열은 작은따옴표(''), 큰따옴표(""), 백틱(``)으로 둘러싼 일련의 문자를 가르킵니다.

let str1 = 'hello world';
let str2 = 'hello world';
let str3 = `hello world`;
let str1 = 'hello world';
let str2 = 'hello world';
let str3 = `hello world`;
2.1. 문자열 작성법
2.1.1. 이스케이프 문자

문자열 안에서 특수한 의미를 가진 문자(따옴표, 백틱 등)를 일반 문자로 표현하거나, 특수한 기능을 수행하는데 사용합니다. 백슬래시를 이용하여 이스케이프 문자를 표현할 수 있습니다.

const str =
  '문자열 작성법\n\t문자열은 작은따옴표(\'\'), 큰따옴표(""), 백틱(``)으로 둘러싼 일련의 문자를 가르킵니다.';
const str =
  '문자열 작성법\n\t문자열은 작은따옴표(\'\'), 큰따옴표(""), 백틱(``)으로 둘러싼 일련의 문자를 가르킵니다.';
이스케이프 문자 | MDN
2.1.2. 템플릿 리터럴

백틱(`)을 이용해서 문자열을 나타내는 표기법을 템플릿 리터럴 이라고 합니다. 따옴표로 생성한 기존의 문자열과는 다르게 문자열 안에 자바스크립트 변수나 값을 삽입할 수 있습니다. 백틱으로 작성된 문자열에 ${}를 이용하여 변수를 사용합니다.

let name = 'licat';
let age = 20;
 
console.log(`안녕하세요, 제 이름은 ${name}입니다! 저는 ${age}살입니다.`);
let name = 'licat';
let age = 20;
 
console.log(`안녕하세요, 제 이름은 ${name}입니다! 저는 ${age}살입니다.`);

템플릿 리터럴은 변수를 삽입할 수 있을 뿐만 아니라, 연산도 가능합니다.

let num1 = 10; let num2 = 20; console.log(`두 수의 합은 ${num1 + num2}입니다.`);
2.2. 문자열의 특징
2.2.1. 순서

문자열은 순서가 있습니다. 순서는 0부터 시작하며 띄어쓰기도 문자로 취급합니다. 이 순서를 인덱스(index)라고 부르며, 각괄호([])를 사용해 특정 위치의 문자를 가져올 수 있습니다.

Untitled
let text = 'hello world'; console.log(text[0]); console.log(text[5]); console.log(text[20]);
2.2.2. 길이

문자열은 길이를 나타내는 length 속성을 가집니다.

let myPassword = 'qwer123!@#'; console.log(myPassword.length);
2.2.3. 불변성(immutable)

원시타입의 특징인 불변성(immutable)을 가지고 있기 때문에, 한 번 만들어진 문자열은 절대 변하지 않습니다. 다음과 같이 인덱스로 문자에 접근해서 값을 할당하더라도 기존의 문자열은 변경이 되지 않습니다. 앞으로 알아볼 메서드도 마찬가지로 기존 문자열을 변경하지 않고 새로운 문자열을 반환합니다.

let 불변성 = 'immutable';
불변성[0] = 'l';
console.log(불변성);
// immutable
 
console.log(불변성.toUpperCase());
console.log(불변성);
// immutable
let 불변성 = 'immutable';
불변성[0] = 'l';
console.log(불변성);
// immutable
 
console.log(불변성.toUpperCase());
console.log(불변성);
// immutable
2.2.4.문자열 연결

문자열은 +연산자로 연결될 수 있습니다. 문자열은 연결된 순서만 동일하다면 같은 문자열로 판단합니다. ==는 같은지를 비교하는 연산자입니다.

let one = 'hello';
let two = ' world';
 
console.log(one + two);
console.log('hello world' == one + two);
let one = 'hello';
let two = ' world';
 
console.log(one + two);
console.log('hello world' == one + two);
2.3. 문자열 메소드

자바스크립트는 문자열 타입에서 사용할 수 있도록 여러가지 메소드를 지원하고 있습니다. 많이 사용하는 유용한 메소드 몇 가지를 살펴보겠습니다.

2.3.1. indexOf(), lastIndexOf()

문자열 안에 존재하는 특정한 문자열을 검색하여 문자의 인덱스를 반환합니다. 검색할 문자열과 검색을 시작할 인덱스 번호 두 가지를 인자로 전달 할 수 있습니다. 문자열 안에 검색하고자하는 문자열이 존재하지 않으면 -1을 반환합니다. 실행해보고 값을 확인해보세요.

const str = "Hello world, Hello weniv!"; console.log(str.indexOf('Hello')); console.log(str.indexOf('weniv')); console.log(str.indexOf('Hello', 6)); console.log(str.indexOf('licat'));

lastIndexOf()는 문자열의 끝에서부터 검색합니다.

const str = "Hello world, Hello weniv!"; console.log(str.lastIndexOf('Hello')); console.log(str.lastIndexOf('weniv')); console.log(str.lastIndexOf('Hello', 6)); console.log(str.lastIndexOf('licat'));
2.3.2. includes()

문자열이 포함되어 있는지 여부를 판별합니다. 인덱스 값이 아닌 포함되어 있는지에 대한 값을 true와 false로 반환합니다.

includes() 메서드는 대소문자를 구분하여 검색합니다. 예를 들어, 'World'와 'world'는 다른 문자열로 인식됩니다.

const str = 'Hello world, Hello weniv!'; console.log(str.includes('Hello')); console.log(str.includes('hello'));
2.3.3. match()

문자열에서 정규표현식과 일치하는 부분을 검색하고, 일치하는 값들을 배열로 반환합니다. 일치하는 값이 없으면 null을 반환합니다.

const str = 'Hello World, Hello Weniv!'; console.log(str.match(/[A-Z]/g)); // 대문자 console.log(str.match(/[0-9]/g)); // 숫자

정규표현식(Regular Expression)은 자바스크립트 뿐만 아니라 파이썬, 자바 등에서도 널리 사용되는 문자열을 검색하거나 대체할 때 사용하는 패턴입니다. 정규표현식은 문자열을 다루는데 유용하며, 문자열의 검색, 대체, 분리 등을 할 때 사용됩니다.

2.3.4. replace()

문자열에서 일치하는 첫번째 문자열을 찾고, 대체하여 새로운 문자열을 반환합니다. 첫 번째 인자는 찾아야하는 문자열, 두 번째 인자는 대체할 값을 전달합니다. 정규표현식 지원하며 이를 이용해 g플래그를 사용하면 일치하는 모든 부분을 대체할 수 있습니다.

console.log("Hello world, Hello weniv".replace("Hello", "Hi")); console.log("Hello world, Hello weniv".replace(/Hello/g, "Hi"));

모든 요소를 변경하기 위해서는 replaceAll 메서드를 사용하거나, 정규표현식의 g 플래그를 사용합니다.

console.log("Hello world, Hello weniv".replaceAll("Hello", "Hi")); console.log("Hello world, Hello weniv".replace(/Hello/g, "Hi"));
2.3.5. substring()

시작 인덱스부터 종료 인덱스 바로 직전까지 추출합니다. 종료 인덱스는 옵션이며 기본값은 문자열의 길이(.length) 입니다. 인덱스에 음수나 숫자가 아닌 값이 오면 0으로 취급합니다. 시작 인덱스가 종료 인덱스보다 크면 두 인자를 바꾼 것처럼 동작합니다.

const str = "Hello weniv!"; console.log(str.substring(6)); console.log(str.substring(-3)); console.log(str.substring(2, -3));
2.3.6. slice()

slice는 “얇게 썰다” 라는 의미처럼 문자열의 일부분을 복사하여 새로운 문자열을 반환합니다. 시작 인덱스와 종료 인덱스를 인자로 전달합니다. 음수 인덱스도 지원합니다. 아래 예제에서 시작 인덱스와 종료 인덱스를 조정해가며 확인해보세요.

const str = 'Hello weniv!'; console.log(str.slice(6)); console.log(str.slice(-3)); console.log(str.slice(6, 14)); console.log(str.slice(8, 3));

substring과 slice

  1. 음수 값이 인수로 들어올 때, substring은 0으로 바꾸어 실행되고, slice는 음수 인덱스로 인식합니다. 숫자가 아닌 값이 들어오는 경우 substring과 slice 모두 0으로 바꾸어 실행합니다.

    str.substring(-5, 8);
str.slice(-5, 8);
    str.substring(-5, 8);
str.slice(-5, 8);

  2. 시작 인덱스가 종료 인덱스보다 큰 경우 substring은 두 값을 바꾸어 실행합니다.

    const str = 'Hello weniv!';
 
str.slice(7, 3);
str.substring(7, 3); // lo w
str.substring(3, 7);
    const str = 'Hello weniv!';
 
str.slice(7, 3);
str.substring(7, 3); // lo w
str.substring(3, 7);
2.3.7. substr()

substr은 시작 인덱스와 길이를 인자로 받습니다. 음수 인덱스가 허용되며, 길이가 음수거나 0이면 빈 문자열을 반환하고, 길이가 생략된 경우에는 문자열의 끝까지 반환합니다.

const str = "Hello weniv!"; console.log(str.substr(4, 5)); console.log(str.substr(6));

Deprecated?

MDN은 웹표준에서 제거된 함수를 Deprecated로 명시합니다. substr은 현재 웹 표준에서 제거된 것은 아니지만 명세에서 사라질 수 있기 때문에 substring이나 slice를 사용하는 것을 권장

String.prototype.substr() - JavaScript | MDN

Untitled

2.3.8. split()

split은 "쪼개다" 라는 의미처럼 인자로 전달하는 구분자로 문자열을 쪼개어 각각의 값을 원소로 하는 배열을 반환합니다. 두 번째 인자로 나눌 갯수를 전달 할 수 있으며, 구분자가 빈 문자열이라면 문자열 하나하나가 모두 쪼개진 배열이 반환됩니다.

console.log('010-1234-1234'.split('-')); console.log('apple'.split('')); console.log('apple banana watermelon strawberry'.split(' ', 2));
2.3.9. toLowerCase(), toUpperCase()

문자열을 소문자, 혹은 대문자로 변환한 새로운 문자열을 생성하여 반환합니다.

console.log('I want to go home!'.toLowerCase()); console.log('I want to go home!'.toUpperCase());
2.3.10. repeat()

문자열을 지정된 횟수만큼 반복한 새로운 문자열을 반환합니다

console.log('*'.repeat(5));
2.3.11. trim(), trimStart(), trimEnd()

문자열 앞 뒤의 공백을 제거합니다. trim과 유사한 trimStart와 trimEnd는 각각 문자열의 앞과 뒤의 공백을 제거합니다. 하지만 trimStart와 trimEnd는 IE11에서 지원되지 않습니다.

console.log(' licat '.trim()); console.log(' licat '.trimStart()); console.log(' licat '.trimEnd());
2.3.12. padStart(), padEnd()

자릿수에 맞춰 인자로 전달받은 문자열을 채웁니다. 패딩에 사용할 문자열을 지정하지 않는 경우 공백으로 채워집니다. padStart는 문자열의 앞(왼쪽)에 패딩을 채우고, padEnd는 문자열의 뒤(오른쪽)에 패딩을 채웁니다.

const month = '7'; const date = '13'; console.log('오늘은 ' + month.padStart(2,'0') + '월 ' + date.padStart(2,'0') + '일 입니다.');
const flag = 'pad 예시'; console.log(flag.padEnd(20, '-'));
3.1 타입이란?3.3 숫자형과 BigInt