• 회원가입
  • 로그인
  • 구글아이디로 로그인

[Basic] JS - Strings - JS문자열

목차
  1. 문자열 구문
  2. 문자열 길이 (= 문자 개수)
  3. 회피문자
  4. 문자열 줄바꿈
  5. 문자열은 객체 가능
  6. 문자열 속성(property) / 메서드(method)
  7. 문자열과 변수 연결

 

문자열 구문

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 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
게시물이 없습니다.
목록
찾아주셔서 감사합니다. Since 2012