Section 15: JavaScript 문자열

 

1. 문자열 개요

• 텍스트 데이터를 다룰 때 사용한다.
• "" -> 문자열 지정 방법
• ''(작은따옴표), ""(큰따옴표) 모두 사용 가능하며 일관성있게 사용해야 한다.

let name1 = 'Kate'; (O)
let name2 = "Kate"; (O)
let name3 = 'Kate"; (X)

// 혼합 사용의 예
let intro = "I'm a boy";
let say = 'I said "go away"';

 

2. Indices와 Length

//문자열은 인덱싱 되어 있다.
'hello' -> h: 0 / e: 1 / l: 2 / l: 3 / o: 4
 
//각각의 인덱스로 문자에 접근이 가능하다.
let greeting = 'hello';
greeting[0] // 'h'
greeting[1] // 'e'
greeting[99] // undefined 값이 존재하지 않음

// 문자열의 길이, 총 문자 수 5
//index는 0부터 시작하기 때문에 length - 1이 된다.

index // 4  
greeting.length // 5

// 문자열의 연결
let first = '강남';
let last = '스타일';
first + last; // '강남스타일'

let full = first + ' ' + last;
full //'강남 스타일'

// 숫자와 문자열을 더하면 문자열이 된다.
let result = 1 + '안녕'; // '1안녕'

console.log(typeof result) //string

 

 

3. 문자열 규칙

• 문자열에는 내장되어 있는 함수가 있다.
  
  1. 문자를 찾거나
  2. 일부 문자를 교체하거나
  3. 문자열을 결합할 수 있다

/* 
함수 사용의 기본 구조
문자열.메서드이름();
thing.method();
*/

let msg = 'I am a king';

msg.toUpperCase(); // 'I AM A KING'
let msg = 'I am a king';

msg.toUpperCase(); // 'I AM A KING'
msg // 'I am a king' 원본은 그대로

// 대문자로 변환된 문자열 저장
let result = msg.toUpperCase(); // 'I AM A KING'

/*
toUpperCase() 문자열을 대문자로 바꿔준다
toLowerCase() 문자열을 소문자로 바꿔준다
trim() 문자열의 양끝의 공백을 없애준다.
-> 세 메서드 모두 원본 데이터 수정되지 않음
*/

// 두개 이상의 메서드를 동시에 사용할 수 있다.
let str = '     hi, nice to meet you     ';
let result = str.trim().toUpperCase(); // 공백제거, 대문자 변환
console.log(result); // HI, NICE TO MEET YOU

 

4. 인수가 있는 문자열 규칙

// 아래와 같은 방식으로 인자(arg)를 받는다.
// 인자란 메서드로 전달되어서 메서드의 동작을 변경하는 입력 값이다.
// thing.method(arg)


// indexOf
// 문자열의 특정 문자의 인덱스를 반환하는 메서드 
// 특정 문자가 존재하면 index값, 존재하지 않으면 -1을 반환한다.
'hi hello'.indexOf(' '); // 2

// slice
//  문자열의 일부를 자른다.
// str.slice(beginIndex[, endIndex]);
// endIndex 선택 사항
// 원본에 영향을 끼치지 않는다.

'hello'.slice(3);

console.log('hello'.slice(3)); // 'lo'
console.log('hello'.slice(1,2));
console.log('hello'.slice(-2)); // 'lo' 음수는 뒤에서 부터 인덱스를 센다.


// replace
// var newStr = str.replace(regexp|substr, newSubstr|function)
// 첫번째 인자: 문자열이 시작되는 지점
// 두번째 인자: 해당 지점에 교체해여 들어가려는 값
// 원본에 영향을 끼치지 않는다.

let msg = '울지마 울보야';
console.log(msg.replace('울보야', '바보야')); // 울지마 바보야
console.log(msg); // 울지마 울보야

console.log(msg.replaceAll('울','웅얼')); // 웅얼지마 웅얼보야

console.log('하'.repeat(10)); // 하하하하하하하하하하

 

 

5. 엄청나게 유용한 문자열 템플릿

let goods = '아이유 포스터';
let price = '200000';
let qty = 10;

// 위의 변수와 다른 문자열과 같이 사용한다면 + 기호와 따옴표 기호를 번거롭게 거듭해서 사용해야 한다.
console.log(goods + ' 총 ' + qty + '개 구매하셨습니다. 총 금액: ' + price * qty + '원 입니다.');

// Template Literals
// 템플릿 리터럴을 사용하면 위의 불편함을 해소할 수 있다.
// ``기호 와 함께 변수는 ${변수}형태로 사용하면 두 문장의 결과 값이 같은 것을 알 수 있다.
console.log(`${goods} 총 ${qty}개 구매하셨습니다. 총 금액: ${price * qty}원 입니다.`);

 

6. Undefined 와 Null

 

둘 다 원시타입 중 하나이다.

NULL

• 반드시 할당되어져야 한다.
• 의도적으로 값이 없음을 나타내고 싶을 때 부여한다.

Undefined

• 변수에 값이 할당되지 않은 값을 undefined라고 한다.

 

7. 난수와 Math 객체

 

Math.PI; // 3.141592653589793

// 반올림
Math.round(4.9) // 5

// 절대값
Math.abs(-456) // 456

// 지수값 2^3 = 8
Math.pow(2, 3) // 8

// 소수점 이하 버리기
Math.floor(3.9999) // 3

// 0.1xx <= num <= 0.9xxx
Math.random();

// 1 ~ 10까지 난수 생성 함수 만들기
Math.floor(Math.random() * 10) + 1;​