TWD 12. JS 문자열 & 메소드

JS 문자열 & 메소드

본 내용은 'The Web Developer 부트캠프 2023', 'Mozilla Developer Network'를 참고하여 작성했습니다.

1. 문자열

• 숫자와 문자를 합치면 숫자가 문자형으로 강제 형변환을 한다.

let user = 1;
let user2 = "ab";

user+user2
>'1ab'

toUpperCase, toLowerCase

• 문자를 대문자 또는 소문자로 모두 변경해준다.

let user = "abcde";
let user2 = "ABCDE";

user.toUpperCase();
> 'ABCDE'
user.toLowerCase();
> 'abcde'

user
> 'abcde'

let user3 = user.toUpperCase();
user3
> 'ABCDE'

trim

• 문자열 좌우 공백을 지워준다.

let user = "      abcde    ";
> 'abcde'

user
> '      abcde    '

let user3 = user.trim();
user3
> 'abcde'

indexOf

• 문자열 인덱스 자리수 반환

let user = "abcde";

user.indexOf("a");
> 0

user.indexOf("z");
> -1

slice

• 문자열 일부 추출 또는 자르기

let user = "abcde";

user.slice(1,3)
> 'bc'

replace

• 문자열 일부 교체
• Edge, Internet Explorer, Opera에서 사용 불가

let user = "abcde";

user.replace("b","c")
> 'accde'

문자열 템플릿

• ES6부터 새로 도입된 문자열 표기법
• 따옴표 대신 ```(back-tic)으로 문자열을 감싸서 ${} 안에 표현식을 넣어 간단한 식으로 사용할 수 있다.

var a = 5;
var b = 10;
"Fifteen is " + (a + b)+"."
> 'Fifteen is 15.'

`Fifteen is ${a + b}.`
> 'Fifteen is 15.'

NULL & UNDEFINED

• null은 의도적으로 값을 저장하지 않은 설정
• undefined는 아무것도 정의된 것이 없는 경우
• 삼중구문은 값과 타입 모두 비교하는 등식

null === undefined 
> false

null == undefined
> true

!null 
> true

isNaN(1 + null) 
> false

isNaN(1 + undefined)
> true

2. 메소드

console.log

• 다른 언어의 print()와 동일

console.log(1+4, "Hi", true)
>5 "HI" True

console.warn & console.error

• 경고와 에러 메시지 출력

console.warn("UH WARNING!")
> "UH WARNING!" // 저장된 경고 색, 방식과 함께 

console.error("UH ERROR!")
> "ERROR" // 저장된 에러 색, 방식과 함께 

alert

• 문구와 함께 팝업창 생성

alert("HI THERE!")

// HI THERE 문구가 적힌 팝업창 생성

prompt

• 숫자를 입력받는 팝업창 생성
• 문자열로 반환해준다.

prompt("please enter a number")
//please enter a number 문구가 적힌 팝업창 생성 13 입력 시
> "13"

let userInput = prompt("please enter a number")
//please enter a number 문구가 적힌 팝업창 생성 90 입력 시
userInput
> "90"

shift, unshift

• shift: pop과 비슷하며, 시작지점에 값을 빼준다.
• unshift: push와 비슷하며, 시작지점에 값을 넣어준다.

let user = ["a", "b", "c"]
user.shift()

user
> ["b", "c"]

user.unshift("d")

user
> ["d", "b", "c"]

splice

• 특정 범위제거와 요소 추가, 교체를 해주는 메소드
• 첫번째 인자로 시작 인덱스(index), 두번째 인자로 몇개의 값을 삭제할지, 그리고 세번째 인자부터는 값을 추가할 수 있다.

let colors = ["red", "orange", "yellow", "green", "blue", "violet"]

colors.splice(1,0,'red-orange')
> []

colors
> ["red", 'red-orange', "orange", "yellow", "green", "blue", "violet"]

문자형을 숫자 & 숫자형을 문자 변환 메소드

문자형을 숫자

• var 변수 = parseInt(문자); -> 문자를 정수형 숫자로 변환해줌
• var 변수 = parseFloat(문자); -> 문자를 실수형 숫자로 변환해줌
• var 변수 = Nember(문자); -> 문자를 정수&실수형 숫자로 변환해줌

숫자형을 문자

• var 변수 = String(숫자); -> 숫자를 문자로 변환해줌
• var 변수 = 숫자.toString(진법); -> 숫자를 문자로 변환해줌 - 변환하면서 진법을 바꿀 수 있음
• var 변수 = 숫자.toFixed(소수자리수); -> 숫자를 문자로 변환해줌 - 실수형의 소수점 자리를 지정할 수 있음
• var 변수 = 숫자 + “문자열”; -> 숫자와 문자열을 한 문자열로 더해줌