336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
문자열
문자열 자료형은 자바스크립트 내의 텍스트를 나타내며, 문자열은 유니코드 문자의 나열로서 모든 문자열은 내부적으로 유니코드로 구성돼 있다.
자바스크립트에는 문자 자료형이 없다.
문자열 생성
문자열 리터럴을 이용한 문자열 생성
보통 자바스크립트 문자열은 문자열 리터럴을 이용해 생성하는데, 작은따옴표(')나 큰따옴표(") 안에 텍스트가 들어 있으면 문자열이 될 수 있다.
다음은 자바스크립트 문자열을 생성하는 예다.
1
2
3
4
5
|
<script type="text/javascript">
var str1 = "Hello world.";
var str2 = "12345";
var str3 = "It's great!";
</script>
|
cs |
String 전역 객체를 이용한 문자열 생성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<script type="text/javascript">
// 원시 문자열
var str1 = String("12345");
// String 객체
var str2 = new String("Hello world.");
// valueOf 메서드를 이용해 String 객체를 그에 상응하는 원시 문자열로 변환
var str3 = str2.valueOf();
console.log(typeof str1); // string
console.log(typeof str2); // Object
console.log(typeof str3); // string
</script>
|
cs |
특수 문자와 이스케이프 문자
자바스크립트 문자열 안에서 특수 문자를 사용하려면 백슬래시()를 문자 앞에 둘 필요가 있는데, 이를 이스케이프(escape)라고 한다.
다음은 자바스크립트 문자열 내에서 특수 문자를 사용하는 예다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<script type="text/javascript">
var str1 = "first line \n second line \n third line"; // 개행
var str2 = "\f"; // 폼 피드
var str3 = "\r"; // 캐리지 리턴
var str4 = "\t"; // 탭
var str5 = "\v"; // 수직 탭
var str6 = "\'"; // 작은따옴표
var str7 = "\""; // 큰따옴표
var str8 = "c:\\temp"; // 백슬래시 문자(\)
var str9 = "\b"; // 백스페이스
// 유니코드 문자는 4자리 16진수값으로 지정한다.
// 예를 들어, \u00A9는 저작권 기호를 나타내는 유니코드 문자다.
var str10 = "\u00A9";
</script>
|
cs |
백슬래시를 앞에 둬서 줄바꿈을 이스케이프할 수도 있다. 다음 예제를 보자.
1
2
3
4
5
6
|
<script type="text/javascript">
var str = "첫 번째 줄, \
두 번째 줄, \
세 번째 줄";
console.log(str);
</script>
|
cs |
위 문자열의 값 내에서는 백슬래시와 줄바꿈이 모두 제거되고 결과는 다음과 같을 것이다.
첫 번째 줄, 두 번째 줄, 세 번째 줄
위 문자열을 여러 줄에 걸쳐 보이고 싶다면 개행 이스케이프 문자인 \n와 이스케이프된 줄바꿈 문자를 각 줄의 끝에 추가하면 된다. 다음 예제를 보자.
1
2
3
4
5
6
|
<script type="text/javascript">
var str = "첫 번째 줄, \n\
두 번째 줄, \n\
세 번째 줄";
console.log(str);
</script>
|
cs |
결과는 다음과 같다.
first line,
second line,
third line
문자열 길이
String의 length 프로퍼티는 문자열 내의 유니코드 문자의 개수를 나타낸다. 다음 예제는 문자열의 길이를 보여준다.
1
2
3
4
5
6
7
8
|
<script type="text/javascript">
var str1 = "hello\n"; // 개행 이스케이프는 한 문자에 해당
var str2 = "\\\\\\" // 세 개의 백슬래시
var str3 = "\u00A9\u00A9"; // 두 개의 유니코드 문자
console.log(str1.length); // 6
console.log(str2.length); // 3
console.log(str3.length); // 2
</script>
|
cs |
문자열 안의 개별 문자에 접근
charAt() 메서드로 문자열 내의 각 문자에 접근할 수 있다.
1
2
3
4
5
|
<script type="text/javascript">
var str = "Hello World";
console.log(str.charAt(0)); // "H", 문자열 인덱스는 0에서 시작한다
console.log(str.charAt(6)); // "W"
</script>
|
cs |
또한 인덱스로도 문자열 내의 각 문자에 접근할 수 있다
1
2
3
4
5
6
|
<script type="text/javascript">
var str = "Hello World";
console.log(str[0]); // "H", 문자열 인덱스는 0에서 시작한다
console.log(str[6]); // "W"
</script>
|
cs |
대문자와 소문자
toUpperCase()와 toLowerCase() 메서드는 자바스크립트 문자열의 대소문자를 변경하는 데 사용된다
1
2
3
4
5
|
<script type="text/javascript">
var str = "Hello World!";
console.log(str.toUpperCase()); // HELLO WORLD!
console.log(str.toLowerCase()); // hello world!
</script>
|
cs |
문자열 안의 부문자열 찾기
indexOf() 메서드는 문자열 안의 부문자열을 찾는 데 사용되며, 부문자열이 처음으로 나타나는 위치를 반환하고, 부문자열을 찾을 수 없으면 -1을 반환한다.
1
2
3
4
5
6
7
|
<script type="text/javascript">
var str = "Hello World!";
console.log(str.indexOf("Hello")); // 0
console.log(str.indexOf("World")); // 6
console.log(str.indexOf("Hi")); // -1, 찾을 수 없음
console.log(str.indexOf("Hello", 1));// -1, 인덱스 1에서부터 찾기 시작
</script>
|
cs |
lastIndexOf() 메서드는 부문자열이 마지막으로 나타나는 위치를 반환하며, 부문자열을 찾을 수 없으면 -1을 반환한다.
1
2
3
4
5
6
|
<script type="text/javascript">
var str = "Hello World! Hello again.";
console.log(str.lastIndexOf("Hello")); // 13
console.log(str.lastIndexOf("World")); // 6
console.log(str.lastIndexOf("Hi")); // -1, 찾을 수 없음
</script>
|
cs |
부문자열 추출
substring(indexA[, indexB]) 메서드는 index와 다른 인덱스 사이의 부문자열, 또는 인덱스에서 시작해 해당 문자열의 끝까지를 반환하는 데 사용된다. substring() 메서드를 사용하는 예제는 다음과 같다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<script type="text/javascript">
var str = "HelloWorld";
// 0번째 인덱스에서 시작해 5번째 인덱스(이 인덱스에 위치한
// 문자는 포함되지 않음)까지의 문자를 추출
console.log(str.substring(0,5)); // Hello
// indexA > indexB일 경우 두 인자가 서로 바뀜
console.log(str.substring(5,0)); // Hello
// 인자가 0보다 작거나 NaN이면 0으로 간주됨
console.log(str.substring(-1,5)); // Hello
// indexA가 indexB와 같으면 빈 문자열을 반환
console.log(str.substring(5,5)); // (빈 문자열)
// 5번째 문자부터 8번째 인덱스까지 추출하지만
// 8번째 인덱스에 위치한 문자는 포함하지 않음
console.log(str.substring(5,8)); // Wor
// indexB를 생략하면 문자열 끝까지 부문자열로 추출
console.log(str.substring(5)); // World
// 인자가 문자열의 길이보타 크면 문자열의 길이로 간주
console.log(str.substring(5,20)); // World
</script>
|
cs |
위 예제를 실행한 결과는 다음과 같다.
Hello
Hello
Hello
(빈 문자열)
Wor
World
World
substr(start[, length]) 메서드는 지정한 위치에서 시작해 지정된 문자 개수만큼의 부문자열을 반환하는 데 사용된다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<script type="text/javascript">
var str = "HelloWorld";
// 0번째 인덱스에서부터 5개의 문자를 모아서 추출
console.log(str.substr(0,5)); // Hello
// start가 음수이면 substr 메서드에서는 그것을 문자열의
// 끝에서부터 시작하는 인덱스로 사용
console.log(str.substr(-5,5)); // World
// length를 생략하면 substr 메서드에서는 문자열의 끝까지 추출
console.log(str.substr(5)); // World
// start가 음수이면 substr 메서드에서는 그것을 문자열의
// 끝에서부터 시작하는 인덱스로 사용
console.log(str.substr(-5)); // World
// start가 음수이고 abs(start)가 문자열의 길이보다 크면
// substr 메서드에서는 0을 시작 인덱스로 사용
console.log(str.substr(-20, 2)); // He
// 시작 위치가 문자열의 길이보다 크거나 같으면
// substr 메서드에서는 빈 문자열을 반환
console.log(str.substr(20, 2)); // (빈 문자열)
</script>
|
cs |
위 예제를 실행한 결과는 다음과 같다.
Hello
World
World
World
He
(빈 문자열)
부문자열 대체
replace() 메서드는 부문자열을 새로운 부문자열로 대체하는 데 사용된다. 다음 예제를 보자.
1
2
3
4
5
6
7
|
<script type="text/javascript">
var str = "Hello World, Hi World.";
console.log(str.replace("World", "JavaScript"));
// "g"는 문자열 전체를 대상으로 일치하는 문자열을 찾는다는 의미다
console.log(str.replace("World", "JavaScript", "g"));
</script>
|
cs |
위 예제를 실행한 결과는 다음과 같다.
Hello JavaScript, Hi World.
Hello JavaScript, Hi JavaScript.
문자열 배열로 나누기
split() 메서드는 문자열을 부문자열의 배열로 나누는 데 사용된다. 다음 예제를 보자.
1
2
3
4
|
<script type="text/javascript">
var str = "one,two,three,four";
console.log(str.split(",")); // 콤마를 기준으로 분리
</script>
|
cs |
위 예제를 실행한 결과는 다음과 같다.
["one","two","three","four"]
문자열 비교
문자열은 사전순으로 비교되며, 문자열을 비교하는 예제는 다음과 같다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<script type="text/javascript">
// true
console.log("B">"A");
// i > o이므로 true
console.log("Hi">"Hello");
// 문자가 존재하지 않을 경우 항상 비교에서 뒤지므로 true
console.log("AA">"A");
// 소문자 문자는 대문자 문자보다 값이 높으므로 true
console.log("a">"B");
// "5" > "2"이므로 true
console.log("5">"25");
// 숫자이므로 false
console.log(5>25);
// 피연산자가 문자열이 아니면 두 피연산자가 숫자가 되므로 false
console.log(5>"25");
</script>
|
cs |
'[ Developer ] > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 숫자 to 문자 형 변환 (0) | 2016.10.06 |
|---|---|
| [JavaScript] 자바스크립트 숫자 타입 (0) | 2016.10.04 |
| [JavaScript] 자바스크립트 자료형 종류 (0) | 2016.09.28 |
| [JavaScript] 자바스크립트란? 자바스크립트 기초 (0) | 2016.09.27 |
| [JavaScript] 자바스크립트 자동 완성 Auto fill (0) | 2016.06.02 |
