javascript

javascript 문자열 함수 정리

노래하는 마케터 2019. 3. 8. 09:28
728x90

문자열
□ " "또는 ' ' 사이에 들어가는 특수 문자 및 모든 문자
□ 개행한다던가 문자열 안에 ", ' 기호를 넣고 싶을 때 사용


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

\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



출처: https://sixthgo.tistory.com/entry/자바스크립트-문자열-함수 [What Would Jesus Do]

728x90