본문 바로가기

컴퓨터/언어,프로그래밍

[JavaScript] 자바스크립트 :: 문자열 함수 모음

문자열

" "또는 ' ' 사이에 들어가는 특수 문자 및 모든 문자

개행한다던가 문자열 안에 ", ' 기호를 넣고 싶을 때 사용


문자열에 삽입되는 특수 문자들

\r

리턴(Return)

\n

다음 줄로 이동(newline)

\\

역슬래시(\)

\t

탭 문자 삽입(tab)

\'

작은 따옴표(')

\b

백스페이스(backspace)

\"

큰 따옴표(")


문자스트링 타입(Character string types)

자바 스크립트 내장객체 -문자열을 다루는 메소드


메소드와 사용법

하는 일

charAt(index)

지정된 위치에서 문자 찾기

indexOf(string)

지정된 문자의 위치를 왼쪽부터 찾기

lastIndexOf(string)

지정된 문자의 위치를 오른쪽부터 찾기

substring(index1, index2)

지정된 위치에 있는 문자열 리턴

toLowerCase()

소문자로 변환하기

toUpperCase()

대문자로 변환하기

concat(string)

두 문자열을 합치기

slice(start_index, end_index)

문자열의 일부를 추출하기

split([분리자])

문자열을 분리하기

substr(start_index, length)

문자열을 length만큼 잘라내기

charCodeAt([index])

문자열의 ISO Latin-1 값 알아내기

fromCharCode("n1", ..., "nn")

ISO Latin-1 값의 문자열 알아내기



1) chart(index)

매개변수로 입력된 숫자(index)가 지정하는 곳의 문자를 리턴


<HTML>

<HEAD>

<TITLE>charAt(index) 메소드</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

var tmp1, tmp2;


tmp1 = "Nanumi".charAt(0);

tmp2 = "Nanumi".charAt(4);


document.write("\"Nanumi\".charAt(0) returns " + tmp1);

document.write("<p>");

document.write("\"Nanumi\".charAt(4) returns " + tmp2);

// 자바스크립트 끝 -->

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>


결과보기

"webedu".charAt(0) returns w

"webedu".charAt(4) returns d


2) indexOf(string) / lastIndexOf(string)

indexOf / lastIndexOf 메소드는 string에 해당하는 부분이 문자열 어느 부분에 있는지 그

위치를 리턴해 주는 함수위치를 리턴해 주므로 리턴 값은 숫자

indexOf(string)은 왼쪽부터 검색을 하고 lastIndexOf(string)은 전체 문자열의 오른쪽부터

검색을 해서 첫번째 만나는 string에 해당하는 문자열의 위치를 리턴

리턴해 주는 값은 모두 왼쪽부터 0, 1, ..., n으로 계산한 값이 리턴


<HTML>

<HEAD>

<TITLE>indexOf(string) / lastIndexOf(string) 메소드</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

var tmp1, tmp2;


tmp1 = "Nanumi is a helper".indexOf("a");

tmp2 = "Nanumi is a helper".lastIndexOf("a");


document.write("indexOf(\"a\") returns " + tmp1);

document.write("<p>");

document.write("lastIndexOf(\"a\") returns " + tmp2);

// 자바스크립트 끝 -->

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

결과보기

indexOf("is") returns 10

lastIndexOf("is") returns 10


3) substring(index1, index2)

substring 메소드는 index1과 index2 사이에 있는 문자열을 리턴하는 메소드


<HTML>

<HEAD>

<TITLE>substring(index1, index2) 메소드</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

var tmp1, tmp2, tmp3, tmp4;


tmp1 = "Nanumi".substring(1,3);

tmp2 = "Nanumi".substring(3,1);

tmp3 = "Nanumi".substring(3);

tmp4 = "Nanumi".substring();


document.write("\"Nanumi\".substring(1,3) returns " + tmp1);

document.write("<p>");

document.write("\"Nanumi\".substring(3,1) returns " + tmp2);

document.write("<p>");

document.write("\"Nanumi\".substring(3) returns " + tmp3);

document.write("<p>");

document.write("\"Nanumi\".substring() returns " + tmp4);

// 자바스크립트 끝 -->

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

결과보기

"webedu".substring(1,3) returns eb

"webedu".substring(3,1) returns eb


"webedu".substring(3) returns edu


"webedu".substring() returns webedu



4) toLowerCase() / toUpperCase()

toLowerCase() 메소드는 지정된 문자열을 모두 소문자로 만들 때 사용하고,

toUpperCase() 메소드는 지정된 문자열을 모두 대문자로 만들 때 사용


<HTML>

<HEAD>

<TITLE>toLowerCase() / toUpperCase() 메소드</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

var tmp1, tmp2;


tmp1 = "Nanumi".toLowerCase();

tmp2 = "Nanumi".toUpperCase();


document.write("\"Nanumi\".toLowerCase() returns " + tmp1);

document.write("<p>");

document.write("\"Nanumi\".toUpperCase() returns " + tmp2);

// 자바스크립트 끝 -->

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>


결과보기

"webedu".toLowerCase() returns webedu

"webedu".toUpperCase() returns WEBEDU



5) concat(string)

concat 메소드는 두 개의 문자열을 합쳐서 하나의 새로운 문자열을 만드는 메소드

concat(string) 메소드를 호출하는 문자열과 매개변수로 들어가는 string 이라는 문자열이

하나로 합쳐져 새로운 문자열을 만들어 낸다.


<HTML>

<HEAD>

<TITLE>concat(string) 메소드</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

document.write("Nanumi".concat(" 홈페이지 제작 도우미"));

// 자바스크립트 끝 -->

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>


결과보기

webedu 홈페이지 제작 도우미



6) slice(start_index, end_index)

slice 메소드도 앞에서 설명한 substring 메소드와 같이 문자열의 일부를 리턴

start_index는 추출할 문자열의 처음 위치를 숫자로 표시


<HTML>

<HEAD>

<TITLE>slice(start_index, end_index) 메소드</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

var tmp1, tmp2;


tmp1 = "Nanumi is good.".slice(2, 5); // ①

tmp2 = "Nanumi is good.".slice(2, -5); // ②


document.write("[" + tmp1 + "]<p>");

document.write("[" + tmp2 + "]");

// 자바스크립트 끝 -->

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>


결과보기

[bed]

[bedu is ]



7) split([분리자])

split 메소드는 입력되는 '분리자'를 기준으로 ','을 이용하여 문자열을 분리


<HTML>

<HEAD>

<TITLE>split([분리자]) 메소드</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

var str;


str = "Nanumi is good place on the web!"

document.write(str.split(" ") + "<p>");

document.write(str.split("oo") + "<p>");

document.write(str.split("a"));

// 자바스크립트 끝 -->

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>


결과보기

webedu,is,good,place,on,the,web!

webedu is g,d place on the web!


webedu is good pl,ce on the web!



8) substr(start_index, length)

substr 메소드 역시 substring, slice 메소드와 마찬가지로 문자열의 일부를 리턴


<HTML>

<HEAD>

<TITLE>substr(start_index, length) 메소드</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

var str;


str = "Nanumi is good place on the web!"

document.write("[" + str.substr(10, 4) + "]" + "<p>");

document.write("[" + str.substr(15, 5) + "]" + "<p>");

document.write("[" + str.substr(18, 5) + "]" );

// 자바스크립트 끝 -->

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>


결과보기

[good]

[place]


[ce on]



9) charCodeAt([index]) / fromCharCode(n1, n2, ..., nn)

charCodeAt 메소드는 문자열의 특정 위치에 있는 문자의 ISO-Latin-1 값을 알아내는데

사용하는 메소드 이고 fromCharCode 메소드는 그 반대


<HTML>

<HEAD>

<TITLE>charCodeAt / fromCharCode 메소드</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

var str;


str = "Nanumi is good place on the web!"

document.write(str.charCodeAt(0) + "<p>");

document.write(str.charCodeAt(1) + "<p>");

document.write(str.charCodeAt(2) + "<p>");

document.write(str.charCodeAt(3) + "<p>");

document.write(str.charCodeAt(4) + "<p>");

document.write(str.charCodeAt(5) + "<p>");

document.write(String.fromCharCode("78", "97", "110", "117", "109", "105"));

// 자바스크립트 끝 -->

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>


결과보기


119

101


98


101


100


117


Nanumi  

제주삼다수, 2L,... 오뚜기 진라면 매운... 상하목장 유기농 흰... 남양 프렌치카페 카... 고려인삼유통 홍삼 ... 종근당건강 오메가3... 요이치 카링 유무선...