웹 프로그래밍 기초/객체

내장 객체(String)

별초롱언니 2025. 4. 8. 16:24

일반적으로 문자열은 자바스크립트의 기본 생성자이다. 문자열은 new 키워드를 이용하여 객체로 정의할 수 있다. 

String 객체는 주로 문자열을 추출하거나 조작, 검색하는 기능을 갖는다. String 객체의 사용 방법은 다음과 같다. 프로그램 실행 속도를 고려한다면 문자열 객체를 사용하지 않는 것이 좋지만 문자열 작업이 요구된다면 객체로 정의해야한다. 

** String 객체의 메서드는 언제나 새로운 문자열을 생성하여 반환한다. 

 

let (객체)변수명 = new String("문자열"); // 객체(object)

let 변수명 = "문자열";  // String

// 객체가 아님(String) -> 임시 String 객체 생성 -> 메서드 호출 -> 원래 본래의 string 타입으로 변환

 

length

이 속성은 문자열의 문자 개수를 반환한다. 자바스크립트가 사용하는 문자열 형식은 UTF-16이며 일반적인 문자들을 표현하기 위해 16bit 코드 단위를 사용한다. 일반적이지 않은 문자들을 표현하기 위해 2개의 코드 단위를 사용해야할 수 있기에 문자열 내에 있는 문자들의 실제 총 숫자가 length 속성에 의해 반환되는 숫자와 일치하지 않을수 있다. (문자가 없는 공백 또한 공백 문자로 길이에 포함된다. )

 

문자열 꾸미는 메서드

메서드 설명
string.big() 큰 글씨
string.bold() 굵은 글씨
string.fontcolor(color) 폰트 색상 지정
string.fontsize(size) 폰트 크기 지정(1~6)
string.small() 작은 글씨
string.strike() 취소선
string.sub() 아래 글자
string.sup() 위 글자
string.link(url) 하이퍼링크(url)
string.anchor(name) 하이퍼링크(name)
string.italics() 이탤릭체 

 

문자열에서 정보 가져오는 메서드 

메서드 설명
charAt(n) 문자열 내의 'n'번째 있는 문자를 반환
concat('문자열') 문자열에 지정된 문자열을 합쳐서 새로운 문자열로 만들어 반환
indexOf('문자',n) 주어진 문자가 있는곳의 인덱스 반환.
만약 n이 주어지면 n번째부터 문자를 검색.
문자가 없을 경우 -1 반환
lastIndexOf('문자') indexOf()와 같은 원리이나 시작이 맨 끝부터이다.
charCodeAt(n) 무자열 내 n번째 있는 문자의 유니코드 값을 반환
match("문자열") 지정된 문자와 동일한 문자를 찾아 배열로 반환 
없으면 null값을 반환
replace('문자1','문자2') 지정한 문자1을 찾아 제시된 문자2로 바꾼다
search('문자') 지정된 문자를 찾아 그곳의 인덱스를 반환
slice(n,m) 문자열의 일부를 반환
split('separator') 'separator'를 콤마로 구분된 각 문자열을 배열로 반환
substring(n,m) n번째부터 m번째까지의 문자를 반환
toLowerCase() 대문자를 소문자로 바꾼다
toUpperCase() 소문자를 대문자로 바꾼다
toString() 객체의 값을 출력한다
valueOf() 객체의 값을 출력한다 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let str01 = "this is JavaScript";
    document.write(`1. 인덱스가 1인 문자 : ${str01.charAt(1)} <br>`);
    document.write(`2. 결합된 문자열 : ${str01.concat(' World...')} <br>`);
    document.write(`3. 검색된 'Ja'인덱스 : ${str01.indexOf('Ja')} <br>`);
    document.write(`4. 9번부터 검색된 'Ja'인덱스 : ${str01.indexOf('Ja',9)} <br>`);
    document.write(`5. 'Ja'문자열이 있으면 결과출력 : ${str01.match('Ja')} <br>`);
    document.write(`6. this를 My partner로 바꾸어 출력 : ${str01.replace('this','My partner')} <br>`);
    document.write(`7. Script가 최초로 발견된 인덱스 : ${str01.search('Script')} <br>`);
    document.write(`8. 인덱스가 2번~7번까지 잘라 반환 : ${str01.slice(2,7)} <br>`);
    document.write(`9. 'a'를 콤마 대체하여 출력 : ${str01.split('a')} <br>`);
    document.write(`10. 인덱스가 2번~7번째까지 잘라 반환 : ${str01.substring(2,7)} <br>`);
    document.write(`11. 객체의 값을 문자열로 출력 : ${str01.toString()} <br>`);
    document.write(`12. 대문자로 출력 : ${str01.toUpperCase()} <br>`);
    document.write(`13. 소문자로 출력 : ${str01.toLowerCase()} <br>`);
    document.write(`14. 객체의 값 그대로 출력 : ${str01.valueOf()} <br>`);
  </script>
</body>
</html>

'웹 프로그래밍 기초 > 객체' 카테고리의 다른 글

replace()  (0) 2025.04.09
indexOf(), search()  (0) 2025.04.09
forEach()  (0) 2025.04.07
delete 연산자  (0) 2025.04.07
sort(), reverse()  (0) 2025.04.07