일반적으로 문자열은 자바스크립트의 기본 생성자이다. 문자열은 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 |