[JavaScript] 문자열

문자열

• 문자열 : string
• 문자 하나 : character → char

 

1. str[index]

• index로 접근 가능
• index : 0부터 시작
• 문자를 바꿀 수 없음

var str = 'UKKIKKI';
console.log(str[0]);   //U

str[0] = 'G';   //U가 G로 바뀌지 않음(에러 발생X)

 

2. + 연산자

• string 타입과 다른 타입 사이에 + 연산자를 쓰면 string (문자열) 형식으로 변환
• 더하기( + ) : 문자열과 숫자 모두에 대해 정의되어 있으므로 '문자열 숫자' + 숫자는 연산이 아닌 문자열의 형태로 이어붙음
• 빼기( - ), 나누기( / ), 곱하기( * ) : 문자열이 아닌 숫자에 대해서만 정의되어 있으므로 '문자열 숫자'가 숫자의 형태로 전환되어
  연산한 결과 값을 출력함

var str1 = 'Despair';
var str2 = 'Ukkikki';
var str3 = '7';

console.log(str1 + str2);   //'DespairUkkikki'
console.log(str1 - str2);   //NaN (-연산자는 사용 불가 )
console.log(str3 + 1)   //'71'(+연산자의 경우 string 형식으로 변환되어 이어붙음)
console.log(str3 - 1)   //'6'("숫자"에 -연산자를 사용하면 뺄셈)
str1.concat(str2, str3);   //'DespairUkkikki7'

//'문자열 숫자' + 숫자는 문자열의 형태로 이어붙이지만
//곱하기(*), 나누기(/), 빼기(-)는 '문자열 숫자'를 숫자로 바뀌어서 연산한 결과값을 출력함

 

 

메소드 (Method)

1. str.indexOf(searchValue)

• argument : 찾고자 하는 문자열 (searchValue)
• return value : 처음으로 일치하는 index, 찾고자 하는 문자열이 없으면 -1
• lastlndexOf : 문자열 뒤에서 부터 찾음 (메소드 이름)

'Black Cat'.indexOf('Black');   //0 → 0번째부터 등장

'Black Cat'.indexOf('Cat');   //6 → 6번째부터 등장

'Black Cat'.indexOf('black');   //-1 찾고자 하는 문자열이 없음. 
// ㄴ 대소문자 구분함

'Black Cat Cat'.indexOf('Cat');   //6 → 6번째부터 등장.
// ㄴ 두번 연속으로 등장 할 경우 처음 등장하는 인덱스만 출력

'Black Cat'.lastIndexOf('a');   //7 → 뒤에서 부터 찾음, 해당하는 index
// ㄴ 뒤에서 부터 찾은 값의 위치를 indexOf로 출력해줘서 7

   - 띄워쓰기도 찾고자하는 문자열 (indexOf)에 포함

 

2. str.includes(searchValue)

• index와는 다르게 true/false를 리턴해준다

var str1 = [1, 2, 3]
var str2 = 'Hello World'
var str3 = ['Hello', 'World']

str1.includes(1)
//true => str1에 1이 있음

str2.includes('Wor')
//true => str2에 문자열 Wor이 있음

str3.includes('olleH')
//false => str3에 문자열 'olleH'가 없음

 

3. str.split(seperator)

• aseperator : 분리 기준이 될 문자열
• return value : 분리된 문자열이 포함된 배열
• join() : 배열로 분리된 문자열을 연결

var str = 'Hello black cat Meow';
console.log(str.split(' '));   //공백을 기준으로 분리
//['Hello', 'black', 'cat', 'Meow']
//여백을 기준으로 (',')의 형태로 구분되서 출력

str.split(" ").join("")
//"HelloblackcatMeow"
//str의 값을 여백을 기준으로 split 한 뒤 빈 스트링(빈 문자열)형태로 출력

str.split(" ").join(" ")
//'Hello black cat Meow'
//여백을 기준으로 자른 뒤 여백을 넣어서 출력

   - csv형식을 처리할 때 유용 : 줄바꿈(\n) , 탭문자(\t) 등 분리 가능 → csv.split('\n')

 

4. str.substring(start, end)

• argument : 시작 index, 끝 index
• return value : 시작과 끝 index 사이의 문자열
• 구간에 있는 문자열을 반환
• start, end 순서 상관 없음
• 음수는 0으로 취급
• 범위 초과 시 마지막까지로 취급
• 종료 index(end)를 입력하지 않으면 시작 index(start) 부터 문자열의 끝까지를 리턴
• start > end 경우 start 값과 end 값을 바꾸어서 처리

var str = 'BlackCat';
console.log(str.substring(0,3));  //(0, 3) : 0, 1, 2 반환되며 end값인 3은 미포함
//'Bla'

var str = 'BlackCat';
console.log(str.substring(3,0));  //(0, 3)으로 바뀜
//'Bla'

var str = 'BlackCat';
console.log(str.substring(-1,3))  //(0, 3)음수는 0으로 취급
//'Bla'

var str = 'BlackCat';
console.log(str.substring(0,30))  //index 범위를 초과하면 index의 마지막까지 리턴
//'BlackCat'

 

5. str.substr(start, number)

• argument : 시작 index, 갯수
• return value : 시작 index부터 number

var str = 'BlackCat';
console.log(str.substr(2,4));   //2번 index를 시작으로 4개 반환
//'ackC'

var str = 'BlackCat';
console.log(str.substr(-2,2));   //뒤에서 2번째인 a를 시작으로 2개 반환
//'at'

 

6. str.slice(start, end)

• argument : 시작 index, 끝 index
• return value : 시작과 끝 index 사이의 문자열
• start 값이 str의 길이와 같거나 큰 수 입력시 '' (빈 스트링)을 리턴
• start 값이 음수일 경우 뒤에서 부터 찾아 해당 index부터 시작값으로 취급
• end 값이 음수일 경우 뒤에서 부터 찾아 해당 index부터 끝 값으로 취급
• 종료 index(end)를 입력하지 않으면 시작 index부터 문자열의 끝까지를 리턴
• start > end인 경우 '' 를 리턴

var str = 'BlackCat';
console.log(str.slice(0,3)); //(0, 3) : 0, 1, 2 반환
//'Bla'

var str = 'BlackCat';
console.log(str.slice(3,0));
//''

var str = 'BlackCat';
console.log(str.slice(-7,5)); //뒤에서 7번째인 'l'이 시작값이 되어 사실상(1, 5)
//'lack'

 

7. str.toLowerCase() / str.toUpperCase()

• argument : 없음
• return value : 대문자를 소문자로 / 소문자를 대문자로 변환

let Cat = 'MEOW'
'MEOW'.toLowerCase();   //'meow'

console.log(Cat)   //'MEOW'
//Cat에 할당된 원본 값은 바뀌지 않음

 

8. str.trim()

• 앞 뒤 공백 제거

let str = '   m e o w   '
consolo.log(str.trim()) //'m e o w'
//작은따옴표와 문자열 사이의 여백은 지워지지만 문자열 사이의 여백은 지워지지 않음

 

9. str.repeat(n)

• n번 반복

let str = 'meow!'
str.repeat(3);   //'meow!meow!meow!'

 

10. str.repalce("a", "b")

• 문자열에서 a를 찾아 b로 바꿔줌
• 맨 처음 찾은 값만 변경하고 끝

let str = 'MEOWM!'
str.replace("M", "E");   //'EEOWM'

let str = 'MEOWM!'
str.replaceAll("M", "E");   //'EEOWE'

 

11. Template literal : `${}`

• 백틱 ``, 달러 $, 중괄호 {} 를 이용해서 문자열안에 변수를 불러올때 사용

let str1 = '검은'
let str2 = '고양이'
let str3 = 'meow'
let str4 = 'Despair'

console.log(`${str1} ${str2} ${str4}는 ${str3}하고 웁니다.`)
//검은 고양이 Despair는 meow하고 웁니다.

 

---

 

Math

• 각종 수학 계산을 도와주며 Math()처럼 함수로는 사용할 수 없음

 

1. Math.random()

• 0부터 1사이의 랜덤 값(난수)을 뽑아줌

Math.random(); //0.xxxxxxxxxxxxxx 형태의 난수를 생성

심화학습

 

2. Math.abs(value)

• 절대값을 알려줌

Math.abs(-15); //15

 

3. Math.floor(value), Math.ceil(value), Math.round(value), .toFixde(value)

• 내림, 올림, 반올림, 소수점 반올림

let value = 5.55

Math.floor(value)  //5
Math.ceil(value)  //6
Math.round(value)  //6
value.toFixed(1)  //5.5
//소숫점을 반올림해서 첫번째자리만 출력

 

4. Math.pow(값, 지수), Math.sqrt(값)

• 거듭제곱, 제곱근

Math.pow(2, 3) //8
//2를 3번 곱했으므로 2*2*2 = 8

Math.sqrt(16)  //4
//4*4 = 16

 

5. Math.max(value, value, ...), Math.min(value, value, ...)

• 여러 값들 중에서 최대, 최소값을 찾아줌

Math.max(5, 6, 10)  //10
Math.min(2, 8, 9)  //2

 

 

Reference

substring()
substring()과 slice()의 차이
join()

문자열 String 정리

문자열 형태의 사칙연산 결과값 Q&A

정규표현식

match 사용법