목차
- 문자열 구문
- 문자열 길이 (= 문자 개수)
- 회피문자
- 문자열 줄바꿈
- 문자열은 객체 가능
- 문자열 속성(property) / 메서드(method)
- 문자열과 변수 연결
문자열 구문
1. JS 문자열은 따옴표 (작은따옴표・큰따옴표) 안에 쓰여진 0개 이상의 문자로 글(text)을 저장하고 다루는데 사용.
<p id="demo"></p>
<script>
var x = "홈짱닷컴 Homzzang.com";
document.getElementById("demo").innerHTML = x;
</script>
결과보기
2. 문자열은 따옴표 (작은따옴표・큰따옴표)로 묶음.
<p id="demo"></p>
<script>
var hz1 = "홈짱닷컴"; // 큰따옴표
var hz2 = 'Homzzang.com'; // 작은따옴표
var hz = hz1 + " " + hz2;
document.getElementById("demo").innerHTML = hz
</script>
결과보기
3. 문자열을 감싼 따옴표와 같지 않는 한 , 문자열에 따옴표 사용 가능.
<p id="demo"></p>
<script>
var hz1 = "'홈짱닷컴'"; // 큰따옴표
var hz2 = '"Homzzang.com"'; // 작은따옴표
var hz = hz1 + " " + hz2;
document.getElementById("demo").innerHTML = hz
</script>
결과보기
문자열 길이 (= 문자 개수)
1.
변수.length 형식으로 구함. 이 경우 변수는 객체(object)가 된 것임.
2.
문자열 길이는 공백까지 포함해서 구하며,
한글, 영문, 특수문자, 공백 모두 1글자로 계산.
[예제]
<p id="hz"></p>
<script>
var site="홈짱닷컴 homzzang.com";
document.getElementById("hz").innerHTML = site.length;
</script>
결과보기 : 17
회피문자
1.
\ (역슬래시) : 문자열에 사용불가한 문자를 사용 가능하게 하는 JS 특수문자 (= 회피문자)
이 경우, 문자열을 감싸는 따옴표와 동일한 따옴표나 \ (역슬래시)를 문자열에서 사용 가능.
- \ ' : 작은따옴표 (single quote)
- \" : 큰따옴표 (double quote)
- \\ : 역슬래시 (backslash)
2. 예제
<p id="demo"></p>
<script>
var x = "\"홈짱닷컴\" Homzzang.com";
var y = ''HTML' \\ 'CSS' \\ 'JS'';
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>
결과보기
3.
JS엔 6 개의 다른 회피문자 존재하나,
타자기, 텔레타이프, 팩스기 등 제어 위해 생긴 거라 HTML에서는 무의미.
- \b : 백스페이스 (backspace)
- \f : 양식 급송 (form feed)\n : 새줄 (new line)
- \r : 복귀 (carriage return)
- \t : 수평도표 (Horizontal Tabulator)
- \v : 수직도표 (Vertical Tabulator)
개행 참고: http://mwultong.blogspot.com/2006/06/line-feed-lf-carriage-return-cr.html
문자열 줄바꿈
[방법1]
가독성 위해, 한 줄에 최대 80글자 안 넘게 작성 권장.
(한 줄에 80자 넘을 정도일 땐, 연산자 뒤에서 줄바꿈.)
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"홈짱닷컴 Homzzang.com";
</script>
[방법2]
문자열 중간에 \ (백슬래시) 사용해 줄바꿈 가능.
단, 이 방법은 크로스브라우징 안 될 수 있으니 주의.
왜냐면, 일부 브라우저는 \ 문자 뒤에 공백을 비허용 .
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "홈짱닷컴 \
Homzzang.com";
</script>
결과보기
[방법3]
+ 기호를 사용해 문자열을 추가하는 방식으로 줄바꿈 가능.
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "홈짱닷컴 " +
"Homzzang.com";
</script>
[주의]
\ (백슬래시)로 JS 코드 중간을 줄바꿈할 수는 없음. (아래 예제 경우 출력 안 됨)
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = \
"홈짱닷컴 Homzzang.com";
</script>
결과보기
문자열은 객체 가능
5-1.
문자열은 원래 변수에 할당하는 데이터 값이지만, 키워드 new 붙이면 객체가 됨.
<p id="demo"></p>
<script>
var x = "홈짱닷컴";
var y = new String("홈짱닷컴");
var txt = typeof x + " " + typeof y;
document.getElementById("demo").innerHTML = txt ;
</script>
결과보기 : string object
5-2.
문자열을 객체로 선언 금지. (∵ 실행속도 저하와 끔찍한 부작용 초래 가능.)
5-3.
== (등호연산자) 이용해 변수와 객체가 같은지 참거짓 조회하면, 둘 다 데이터 같기 때문에 true(참)가 뜸.
왜나면. == 기호는 데이터의 타입(tyle)은 무시하고, 오직 데이터 값 (value)만 같은지 판단하기 때문임.
<p id="demo"></p>
<script>
var x = "홈짱닷컴";
var y = new String("홈짱닷컴");
document.getElementById("demo").innerHTML = x==y;
</script>
결과보기 : true
5-4.
=== (등호) 연산자를 이용해 변수와 객체를 비교해보면, 거짓 (false)로 나옴.
(왜냐면, === 연산자는 데이터의 타입(type)과 값(value) 모두 같은지 비교.)
<p id="demo"></p>
<script>
var x = "홈짱닷컴";
var y = new String("홈짱닷컴");
document.getElementById("demo").innerHTML = x===y;
</script>
결과보기 : false
문자열 속성(property) / 메서드(method)
변수에 할당된 문자열은 원래 객제가 아니므로, 속성・메서드 가질 수 없음.
그러나, 키워드 new 붙어서 객체가 될 경우, 속성이나 메서드 가질 수 있음.
6-1. 문자열 속성 (property)
- constructor 속성 - 문자열 객체의 원형(prototype)을 생성한 함수 반환.
- length 속성 - 문자열 길이를 반환
- prototype 속성 - 객체에 '속성/메서드' 추가하도록 허용.
6-2. 문자열 메서드 (method)
- charAt() 메서드 - 특정 인덱스(위치)에 있는 글자 반환
- charCodeAt() 메서드 - 특정 인덱스에 있는 글자의 유니코드 반환
- concat() 메서드 - 두개 또는 그 이상의 문자열을 합쳐, 그 합쳐진 문자열의 복사본 반환.
- fromCharCode() 메서드 - 유니코드 값을 글자로 전환.
- indexOf() 메서드 - 문자열에서 특정값의 가장 처음 발견된 발생 위치 반환.
- lastIndexOf() 메서드 - 문자열의 특정값의 가장 마지막 발견된 발생 위치 반환.
- localeCompare() 메서드 - 현재 장소(locale)에 있는 2개의 문자열을 비교
- match() 메서드 - 문자열이 정규표현식에 적합한지 여부 찾은 후, 그 적합 여부를 반환.
- replace() 메서드 - 문자열에서 어떤 값을 찾아, 대체된 값을 지닌 새로운 문자열로 반환.
- search() 메서드 - 문자열에서 어떤 값을 찾아, 일치된 위치 반환.
- slice() 메서드 - 문자열 일부를 추출하고, 새 문자열을 반환.
- split() 메서드 - 문자열을 부분문자열 배열로 반환.
- substr() 메서드 - 시작 위치에서 여러 문자를 통해 문자열의 일부를 추출.
- substring() 메서드 - 두 개의 특정 위치 사이의 문자열의 일부를 추출.
- toLocaleLowerCase() 메서드 - 호스트의 장소(locale)에 따라, 문자열을 소문자로 전환.
- toLocaleUpperCase() 메서드 - 호스트의 장소(locale)에 따라, 문자열을 대문자로 전환.
- toLowerCase() 메서드 - 문자열을 소문자로 전환.
- toString() 메서드 - 문자열 객체의 값을 반환.
- toUpperCase() 메서드 - 문자열을 대문자로 전환
- trim() 메서드 - 문자열 양쪽끝에서 여백 제거
- valueOf() 메서드 - 문자열 객체의 기초값 (primitive value) 변환.
PS. 모든 문자열 메서드는 새로운 값을 반환. (기존 원래 변수는 변경 X)
[비표준 메서드] - 일부 브라우저만 지원.
- anchor() 메서드 - 앵커 생성.
- big() 메서드 - 큰 글꼴 사용해 문자열 표시
- blink() 메서드 - 깜박이는 문자열 표시
- bold() 메서드 - 문자열을 굵게 표시
- fixed() 메서드 - fixed-pitch 글꼴 사용해 문자열 표시
- fontcolor() 메서드 - 지정된 색 사용해 문자열 표시
- fontsize() 메서드 - 지정된 크기 사용해 문자열 표시
- italics() 메서드 - 기울임 꼴로 문자열 표시
- link() 메서드 - 문자열을 하이퍼링크로 표시
- small() 메서드 - 작은 글꼴 사용해 문자열을 표시
- strike() 메서드 - 취소선 있는 문자열 표시
- sub() 메서드 - 문자열을 아래 첨자 텍스트로 표시
- sup() 메서드 - 문자열을 위첨자 텍스트로 표시
문자열과 변수 연결
[방법1] + 기호 사용해 연결.
<p id="demo"></p>
<script>
var hz = "홈짱닷컴 Homzzang.com";
var ss= "Welcome to " + hz;
document.getElementById("demo").innerHTML = ss;
</script>
[방법2] Template Literals (String)
`` (백틱 기호: ~ 기호 키 밑의 ` 키) 안에 ${변수명} 입력 시, 변수와 문자열 함께 출력 가능.
(ECMAScript 2015 : IE 지원 X)
(예) console.log(`${hz}`);
[예제1
'use strict';
const hz = 1234567890123456789012345678901234567890n;
console.log(`value: ${hz}, type: ${typeof hz}`); // 아래 표현과 동일 의미.
console.log('value: ' + hz + ', type: ' + typeof hz);
Number.MAX_SAFE_INTEGER;
[예제2]
'use strict';
const open = 2012;
console.log(`홈짱닷컴 Homzzang.com ${open}`);
PS. mdn template literals 강의
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals