원시유형과 객체
앞에서 단순히 값만 가지고 있을 경우에는 '원시 유형'이고 프로퍼티와 메서드를 가지고 있을 때는 '객체'라고 설명했습니다. 그런데 자바스트립트에서는 원시 유형이러도 프로퍼티와 메서드를 사용할 수 있습니다.
문자열을 만들 때 다음의 소스처럼 간단히 변수에 문자열을 할당한 후 length라는 프로퍼티를 사용해보세요.
str 변수에 length라는 프로퍼티를 정의하지 않았는데도 length 프로퍼티를 사용할 수 있습니다.
let str = "hello"
str.length // 5자바스크립트에서 number와 boolean, string 유형은 별도로 프로토타입 객체가 만들어져 있습니다.
즉, 숫자는 Number 객체, 문자열은 String 객체라는 식으로 만들어졌는데, 이런 객체를 '래퍼 객체(wrapper object)'라고 부릅니다.
number나 boolean, string과 같은 원시 유형에서 프로퍼티나 메서드를 사용하면 일시적으로 원시 유형을 해당 객체로 변환합니다. 그리고 프로퍼티나 메서드의 사용이 끝나면 해당 객체는 메모리에서 사라져 버립니다.
필요할 때만 임시로 객체로 바꿔 사용하고 사용이 끝나면 다시 원시 유형으로 되돌아오는데, 이것을 '오토박싱(autoboxing)'이라고 합니다.
문자열의 길이 - length 프로퍼티
문자열의 길이를 찾을 때는 배열에서처럼 length 프로퍼티를 사용합니다.
콘솔 창에서 다음의 소스를 입력해 확인해보면 str문자열에 포함된 공백도 문자열의 길이에 포함되는 것을 알 수 있습니다.
문자열.length // 기본형
let str = "Good morning!";
let greeting = "안녕하세요?";
str.length // 14
greeting.length // 6
문자열에서 문자의 위치 활용하기 - charAt(), indexOf() 메서드
문자열은 여러 개의 문자가 나열되어 있으므로 배열처럼 각 문자의 위치를 가리키는 인덱스가 있다고 가정해서 사용합니다. 위치와 관련된 주요 메서드에서는 chartAt() 메서드와 indexOf() 메서드가 있습니다.
특정 위치의 문자 접근하기 - chartAt() 메서드
문자열에서 특정 위치의 문자를 가져오려면 chartAt() 함수를 사용합니다. 에크마스크립트2015부터는 별도의 메서드없이 배열처럼 대괄호([])를 사용할 수 있습니다. 위치는 인덱스로 표시되는데, 인덱스는 0부터 시작합니다.
다음은 chartAt() 메서드를 사용해 str 문자열에서 인덱스가 3인 요소(점 표기법 사용)와 인덱스가 5인 요소(대괄호 표기법 사용)를 가져오는 예제입니다.
문자열.chartAt(위치) // 기본형
let str = "Good morning!";
str.chartAt(3) // "d"
str[5] // "m"문자열에서 부분 문자열의 위치 찾기 - indexOf() 메서드
2개 이상의 단어로 구성된 문자열에는 공백으로 구분되는 여러 개의 부분 문자열이 있을 수 있습니다. 문자열에서 부분 문자열이 어디에 있는지 검색할 때 indexOf() 메서드를 사용하면 편리합니다.
indexOf() 메서드는 괄호 안의 문자열이 나타난 위치를 알려주고 '위치'값을 생략할 경우에는 문자열이 나타난 첫번째 위치를 알려줍니다.
예) str1라는 문자열에서 morning이라는 문자열을 찾으려면 다음과 같이 작성합니다.
이때 반환값은 morning 문자열이 나타난 첫 번째 위치입니다.
만약 찾는 문자열이 없으면 -1을 반환합니다.
indexOf(문자열) // 기본형
indexOf(문자열,위치) // 기본형
let str1 = "Good morning, everyone, Beautiful morning."
srt1.indexOf("morning") // 5
str1.indexOf("evening") // -1
firstIndex = str1.indexOf("morning") // 5 (첫번째 "morning"의 위치)
str1.indexOf("morning", firstIndex+1) // 34 (두번째 "morning"의 위치)
문자열에는 어떤 문자가 있는지 확인하기 - startsWith(), endsWith(), includes() 메서드
문자열에 특정한 문자가 포함되었는지 확인할 때도 indexOf() 메서드를 사용했지만, 에크마스크립트 2015부터는 용도에 맞는 메서드들이 추가되었습니다.
특정 문자나 문자열로 시작하는지 확인하기 - startsWith() 메서드
문자열이 특정 문자나 문자열로 시작하는지 확인해야 할때 startsWith() 메서드를 사용할 수 있습니다. 이 때 확인할 문자나 문자열에서 영문자의 대소문자를 구별하므로 주의해야 합니다. 이때 결과값은 true나 false 입니다.
문자열.startsWith(문자 또는 문자열) // 기본형
str2 = "Hello, everyone."
str2.startsWith("Hello") // true
str2.startsWith("hello")` // false
str2.startsWith("He") // true
str2.startsWith("Hello, ev") // truestartsWith() 메서드는 위치를 함께 지정하면 특정 문자나 문자열이 해당 위치부터 시작하는지 확인할 수 있습니다.
str2에서 인덱스1(두번째 값)은 el로 시작하고, 인덱스 4(다섯번째 값)는 o로 시작하므로 모두 true가 됩니다.
문자열.startsWith(문자 또는 문자열, 위치) // 기본형
str2 = "Hello, everyone."
str2.startsWith("el", 1) // true
str2.startsWith("o", 4) // true문자열이 특정 문자나 문자열로 끝나는지 확인하기 - endsWith() 메서드
문자열이 특정 문자나 문자열로 끝나는지 확인할 수 있는 endsWith 메서드입니다. 이 메서드의 결과값도 true나 false이고 영문자의 대소문자를 구별합니다.
문자열.endsWith(문자나 문자열) // 기본형
str2 = "Hello, everyone."
str2.endsWith("everyone.") // true
str2.endsWith("Everyone.") // false
str2.endsWith("one.") // true
str2.endsWith("lo, everyone") // falseendsWith() 메서드를 사용할 때 문자열과 함께 길이를 함께 지정할 수 있습니다. 이때 startsWith() 메서드에서는 위치를, endsWith() 메서드에서는 길이를 사용한다는 것을 꼭 구분해서 기억해야 합니다.
str2의 전체 길이는 16이므로 길이가 16인 문자열의 마지막 문자열이 one.인지 확인하면 true가 됩니다.
길이가 5이면 str2 문자열에서 Hello만 해당되므로 마지막 문자열이 lo인지 확인하면 true가 됩니다.
문자열.endsWith(문자열, 길이) // 기본형
str2 = "Hello, everyone."
str2.endsWith("one", 16) // true ('Hello, everyone.'의 마지막은 one.입니다.)
str2.endsWith("lo", 5) // true ('Hello'의 마지막은 lo입니다.)문자열에 특정 문자나 문자열이 포함되었는지 확인하기 - includes() 메서드
문자열에 특정 문자나 문자열이 포함되었는지 확인할 때 includes() 메서드를 사용할 수 있습니다.
이 메서드도 영문자의 대소문자를 구별합니다.
문자열.includes(문자열) // 기본형
str2 = "Hello, everyone."
str2.includes("every") // true
문자열에서 공백 제거하기 - trim(), trimStart(), trimEnd() 메서드
문자열에서 공백이란, 스페이스바를 눌러 입력한 공백과 Tab을 눌러 입력한 탭, 그리고 줄을 바꾸기 위해 사용한 이스케이프 문자(\n, \r) 등을 말합니다. 문자열에는 공백을 넣을 수도 있고, 원래의 공백을 그대로 표시할 수도 있습니다. 하지만 연산에 사용하기 위해 공백을 제거할 경우 String 객체에 있는 메서드를 사용하면 매우 간단하게 삭제할 수 있습니다.
문자열.trim() // 문자열의 앞뒤 공백을 제거합니다.
문자열.trimStart() // 문자열의 앞쪽 공백을 제거합니다.
문자열.trimEnd() // 문자열의 뒤쪽 공백을 제거합니다.
let str3 = " ab cd ef ";
str3.trim() // 'ab cd ef'
str3.trimStart() // 'ab cd ef '
str3.trimEnd() // ' ab cd ef'
문자열의 대소문자 바꾸기 - toUpperCase(), toLowerCase() 메서드
영문자 문자열의 경우에는 모두 대문자로, 또는 모두 소문자로 바꿀 수 있습니다.
문자열.toUpperCase() // 문자열을 모두 대문자로 변환합니다.
문자열.toLowerCase() // 문자열을 모두 소문자로 변환합니다.
let str4 = "Good morning.";
str4.toUpperCase() // "GOOD MORNING."
str4.toLowerCase() // "good morning."
부분 문자열 추출하기 - substring(), slice() 메서드
문자열 중에서 특정 문자열만 추출할 때는 substring() 메서드와 slice() 메서드를 사용합니다.
substring() 메서드
substring() 메서드는 시작 위치부터 끝 위치의 직전까지 추출해서 반환합니다. 이때 끝 위치의 직전까지 추출하고 끝 위치는 포함하지 않습니다. 끝 위치를 지정하지 않으면 시작 위치부터 문자열 끝까지 추출해서 반환합니다.
문자열.substring(시작 위치) // 기본형
문자열.substring(시작 위치, 끝 위치)// 기본형
str4 = "Good morning."
str4.substring(5) // "morning."
str4.substring(0, 4)// "Good"slice() 메서드
slice() 메서드는 substring() 메서드와 거의 비슷하게 사용할 수 있습니다. 시작 위치만 지정하면 해당 위치부터 끝까지, 시작 위치와 끝 위치를 함께 지정하면 시작 위치부터 끝 위치 직전까지 추출합니다.
slice() 메서드는 위치를 지정할 때 substring() 메서드와 달리 음수를 사용할 수 있습니다.
음수로 지정하면 문자열의 끝에서부터 위치를 찾으므로 문자열을 뒤에서부터 자를 경우에는 slice() 메서드가 편리합니다.
예를 들어 다음과 같이 지정하면 시작 위치는 뒤로부터 5번째 위치가 되고, 끝 위치는 양수이므로 원래의 위치대로 13번째가 됩니다.
문자열.slice(시작 위치) // 기본형
문자열.slice(시작 위치, 끝 위치) // 기본형
str4 = "Good morning."
str4.slice(0, 4) // "Good"
str4.slice(-5, 12) // "ning"
str4.substring(-5, 12) // "Good morning"참고로 substring() 메서드의 경우 위치값에 음수가 들어가면 무조건 0으로 바꿔서 실행합니다.
구분자에 따라 문자 쪼개기 - split() 메서드
문자열의 split() 메서드는 문자열에서 구분자를 기준으로 문자열을 쪼개줍니다.
예를 들어 str5 문자열을 단어별로 구별하려면 구분자를 공백(" ")으로 지정해서 split() 메서드를 실행해야 합니다. split() 메서드는 새로운 배열을 반환합니다.
문자열.split(구분자) // 기본형
str5 = "Hello everyone"
array1 = str5.split(" ") // ["Hello", "everyone"]
array2 = str5.split("") // ["H","e","l","l","o"," ","e","v","e","r","y","o","n","e"]만약 문자열을 각각의 글자로 나누어서 문자 배열로 변환하려면 구분자를 큰따옴표("")로 지정합니다.
글자별로 구분할 때는 큰 따옴표 사이에 공백이 없어야 합니다.