Top

01. 문자열 : 문자열 결합 / 템플릿 문자열

템플릿 문자열은 내장된 표현식을 허용하는 문자열이다. 내장된 표현식을 허용한다는 것은 변수에 저장된 내용을 문자열에 작업할 수 있다는 뜻이다.

번호 기본값 메서드 리턴값
//01
const str1 = "자바스크립트";
const str2 = "제이쿼리";

document.querySelector(".sample01_N1").innerHTML = "1";
document.querySelector(".sample01_Q1").innerHTML = "자바스크립트, 제이쿼리";
document.querySelector(".sample01_M1").innerHTML = "문자열(string) 결합";
document.querySelector(".sample01_P1").innerHTML = str1 + str2;

//02
const num1 = 100;
const num2 = 200;

document.querySelector(".sample01_N2").innerHTML = "2";
document.querySelector(".sample01_Q2").innerHTML = "100, 200";
document.querySelector(".sample01_M2").innerHTML = "숫자(number) 결합";
document.querySelector(".sample01_P2").innerHTML = num1 + num2;

//03 :나는 모던(modern) 자바스크립트(javascript) 핵심을 배우고 싶다.
const text1 = "모던";
const text2 = "자바스크립트";
const text3 = "핵심";

document.querySelector(".sample01_N3").innerHTML = "3";
document.querySelector(".sample01_Q3").innerHTML = "모던, 자바스크립트, 핵심";
document.querySelector(".sample01_M3").innerHTML = "문자열(string) 결합";
document.querySelector(".sample01_P3").innerHTML = "나는 " + text1 + "(modern) " + text2 + "(javascript) " + text3 + "을 배우고 싶다.";

//04
document.querySelector(".sample01_N4").innerHTML = "3";
document.querySelector(".sample01_Q4").innerHTML = "모던, 자바스크립트, 핵심";
document.querySelector(".sample01_M4").innerHTML = "템플릿 문자열";
document.querySelector(".sample01_P4").innerHTML = `나는 ${text1}(modern) ${text2}(javascript) ${text3}을 배우고 싶다`;

02. 문자열 메서드 : toUpperCase()/ toLowerCase()

문자열의 대문자를 소문자로, 소문자로 대문자로 바꿉니다.

번호 기본값 메서드 리턴값
const str1 = "javascript";
const curentStr1 = str1.toUpperCase();

document.querySelector(".sample02_N1").innerHTML = "1";
document.querySelector(".sample02_Q1").innerHTML = "javascript";
document.querySelector(".sample02_M1").innerHTML = "toUpperCase()";
document.querySelector(".sample02_P1").innerHTML = curentStr1;

const str2 = "JAVASCRIPT";
const curentStr2 = str2.toLowerCase();

document.querySelector(".sample02_N2").innerHTML = "2";
document.querySelector(".sample02_Q2").innerHTML = "JAVASCRIPT";
document.querySelector(".sample02_M2").innerHTML = "toLowerCase()";
document.querySelector(".sample02_P2").innerHTML = curentStr2;

03. trim() / trimStart() / trimEnd()

문자열의 앞뒤 공백을 제거합니다.

번호 기본값 메서드 리턴값
const str1 = "        javascript      ";
const currentStr1 = str1.trim();

document.querySelector(".sample03_N1").innerHTML = "1";
document.querySelector(".sample03_Q1").innerHTML = str1;
document.querySelector(".sample03_M1").innerHTML = "trim()";
document.querySelector(".sample03_P1").innerHTML = currentStr1;

const str2 = "        javascript      ";
const currentStr2 = str2.trimStart();

document.querySelector(".sample03_N2").innerHTML = "2";
document.querySelector(".sample03_Q2").innerHTML = str2;
document.querySelector(".sample03_M2").innerHTML = "trimStart()";
document.querySelector(".sample03_P2").innerHTML = currentStr2;

const str3 = "        javascript      ";
const currentStr3 = str3.trimEnd();

document.querySelector(".sample03_N3").innerHTML = "3";
document.querySelector(".sample03_Q3").innerHTML = str3;
document.querySelector(".sample03_M3").innerHTML = "trimEnd()";
document.querySelector(".sample03_P3").innerHTML = currentStr3;

04. slice() / substring() / substr()

문자열에서 원하는 값을 추출하여 문자열을 반환하는 메서드입니다.

"문자열".slice(시작위치)
"문자열".slice(시작위치, 끝나는위치)
//시작 위치의 값은 항상 끝나는 위치의 값보다 작아야 합니다.
//substring()은 시작값이 끝나는 값보다 클 경우 두 값을 바꿔서 처리합니다.(에러 방지)
"문자열".substr(시작위치)
"문자열".substr(시작위치, 길이)

const str1 = "javascript reference";
const currentStr1 = str1.slice(0); //javascript reference
const currentStr2 = str1.slice(1); //avascript reference
const currentStr3 = str1.slice(2); //vascript reference
const currentStr4 = str1.slice(0, 1); //j
const currentStr5 = str1.slice(0, 2); //ja
const currentStr6 = str1.slice(0, 3); //jav
const currentStr7 = str1.slice(1, 2); //a
const currentStr8 = str1.slice(1, 3); //av
const currentStr9 = str1.slice(1, 4); //avs
const currentStr10 = str1.slice(-1); //e
const currentStr11 = str1.slice(-2); //ce
const currentStr12 = str1.slice(-3); //nce
const currentStr13 = str1.slice(-3, -1); //nc
const currentStr14 = str1.slice(-3, -2); //n
const currentStr15 = str1.slice(-3, -3); //

const currentStr16 = str1.slice(1, 4); //ava
const currentStr17 = str1.slice(4, 1); //
const currentStr18 = str1.substring(1, 4); //ava
const currentStr19 = str1.substring(4, 1); //ava    //sbstring()은 시작점과 끝점을 바궈 써도 잘못된걸 인지하고 제대로 출력해준다.

const currentStr20 = str1.substr(0); //javascript reference
const currentStr21 = str1.substr(1); //avascript reference
const currentStr22 = str1.substr(2); //vascript reference
const currentStr23 = str1.substr(0, 1); //j
const currentStr24 = str1.substr(0, 2); //ja
const currentStr25 = str1.substr(0, 3); //jav
const currentStr26 = str1.substr(1, 2); //av
const currentStr27 = str1.substr(1, 3); //ava
const currentStr28 = str1.substr(1, 4); //avas
const currentStr29 = str1.substr(-1); //e
const currentStr30 = str1.substr(-2); //ce
const currentStr31 = str1.substr(-3); //nce
const currentStr32 = str1.substr(-1, 1); //e
const currentStr33 = str1.substr(-1, 2); //ce
const currentStr34 = str1.substr(-1, 3); //nce

05. split()

split() 메서드는 문자열에서 원하는 값을 추출하여 배열로 반환합니다.

// "문자열".split(구분자);
// "문자열".split(정규식 표현);
// "문자열".split(구분자, 갯수);
const str1 = "javascript reference";
const currentStr1 = str1.split(''); // ['j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't', ' ', 'r', 'e', 'f', 'e', 'r', 'e', 'n', 'c', 'e']
const currentStr2 = str1.split(' '); // ['javascript', 'reference']
const currentStr3 = str1.split('', 1); // ['j']
const currentStr4 = str1.split('', 2); // ['j', 'a']
const currentStr5 = str1.split(' ', 1); // ['javascript']
const currentStr6 = str1.split(' ', 2); // ['javascript', 'reference']
const currentStr7 = str1.split('j'); // ['', 'avascript reference']
const currentStr8 = str1.split('a'); // ['j', 'v', 'script reference']
const currentStr9 = str1.split('e'); // ['javascript r', 'f', 'r', 'nc', '']

const str2 = "java/script/refer/ence";
const currentStr10 = str2.split('/'); // ['java', 'script', 'refer', 'ence']

const str3 = "java&script&refer!ence";
const currentStr11 = str3.split('!'); // ['java&script&refer', 'ence']
const currentStr12 = str3.split('&'); // ['java', 'script', 'refer!ence']
const currentStr13 = str3.split(/&|\!/); // ['java', 'script', 'refer', 'ence']

const str4 = "javascript reference";
const currentStr14 = str4.split('').join(); // j,a,v,a,s,c,r,i,p,t, ,r,e,f,e,r,e,n,c,e
const currentStr15 = str4.split('').join('*'); // j*a*v*a*s*c*r*i*p*t* *r*e*f*e*r*e*n*c*e
const currentStr16 = str4.split('').reverse().join(); // e,c,n,e,r,e,f,e,r, ,t,p,i,r,c,s,a,v,a,j
const currentStr17 = str4.split('').reverse().join('/'); // e/c/n/e/r/e/f/e/r/ /t/p/i/r/c/s/a/v/a/j

06. replace() / replaceAll()

replace() / replaceAll() 메서드는 문자열의 특정 부분을 선택해 바꾼 후 바뀐 문자열을 반환하여 줍니다.

"문자열".replace("찾을 문자열", "변경할 문자열")
"문자열".replace(정규식)
"문자열".replace(정규식, "변경할 문자열")
const str1 = "javascript reference";
const currentStr1 = str1.replace("javascript", "자바스크립트"); //자바스크립트 reference
const currentStr2 = str1.replace("j", "J"); //Javascript reference
const currentStr3 = str1.replace("e", "E"); //javascript rEference
const currentStr4 = str1.replaceAll("e", "E"); //javascript rEfErEncE
const currentStr5 = str1.replace(/e/g, "E"); //javascript rEfErEncE //g는 모두 선택하는 정규식
const currentStr6 = str1.replace(/e/gi, "E"); //javascript rEfErEncE    //gi는 대소문자 가리지 않고 모두 선택하는 정규식

const str2 = "https://www.naver.com/img01.jpg";
const currentStr7 = str2.replace("img01.jpg", "img02.jpg");

const str3 = "010-2000-1000";
const currentStr8 = str3.replace("-", ""); //0102000-1000
const currentStr9 = str3.replaceAll("-", ""); //01020001000
const currentStr10 = str3.replaceAll(/-/g, ""); //01020001000
const currentStr11 = str3.replaceAll(/-/g, " "); //010 2000 1000
const currentStr12 = str3.replaceAll("-", "*"); //010*2000*1000
const currentStr13 = str3.replaceAll(/[1-9]/g, "*"); //0*0-*000-*000

07. concat()

concat()메서드는 둘 이상의 문자열을 추가하여 결합해 줍니다. 결합된 문자열을 반환합니다.

"문자열".concat(문자열)
"문자열".concat(문자열, 문자열…)
const str1 = "javascript";
const currentStr1 = str1.concat("reference"); //javascriptreference
const currentStr2 = str1.concat(" ", "reference"); //javascript reference
const currentStr3 = str1.concat(", ", "reference"); //javascript, reference
const currentStr4 = str1.concat(", ", "reference", ", ", "book"); //javascript, reference, book
const currentStr5 = str1.concat(" ", ["reference","book"]); //javascript reference,book

08. repeat()

repeat() 메서드는 문자열을 복사하여, 복사한 새로운 문자열을 반환합니다.

"문자열".repeat(반복수)
const str1 = "javascript";
const currentStr1 = str1.repeat(0); //
const currentStr2 = str1.repeat(1); //javascript
const currentStr3 = str1.repeat(2); //javascriptjavascript

09. padStart() / padEnd()

padStart()/padEnd() 메서드는 주어진 길이에 맞게 앞/뒤 문자열을 채우고, 새로운 문자열을 반환합니다.

"문자열".padStart(길이)
"문자열".padStart(길이, 문자열)
const str1 = "456";
const currentStr1 = str1.padStart(1, "0"); //456
const currentStr2 = str1.padStart(2, "0"); //456
const currentStr3 = str1.padStart(3, "0"); //456
const currentStr4 = str1.padStart(4, "0"); //0456
const currentStr5 = str1.padStart(5, "0"); //00456
const currentStr6 = str1.padStart(6, "0"); //000456
const currentStr7 = str1.padStart(6, "1"); //111456
const currentStr8 = str1.padStart(6, "12"); //121456
const currentStr9 = str1.padStart(6, "123"); //123456
const currentStr10 = str1.padStart(6, "1234"); //123456
const currentStr11 = str1.padStart(6); //   456 //문자열 자리에 아무것도 안쓰면 공백처리

const currentStr12 = str1.padEnd(1, "0"); //456
const currentStr13 = str1.padEnd(2, "0"); //456
const currentStr14 = str1.padEnd(3, "0"); //456
const currentStr15 = str1.padEnd(4, "0"); //4560
const currentStr16 = str1.padEnd(5, "0"); //45600
const currentStr17 = str1.padEnd(6, "0"); //456000
const currentStr18 = str1.padEnd(6, "1"); //456111
const currentStr19 = str1.padEnd(6, "12"); //456121
const currentStr20 = str1.padEnd(6, "123"); //456123
const currentStr21 = str1.padEnd(6, "1234"); //456123
const currentStr22 = str1.padEnd(6); //456___

10. indexOf() / lastIndexOf()

문자열에서 특정 문자의 위치를 찾고, 숫자를 반환합니다.

"문자열".indexOf("검색값")
"문자열".indexOf("검색값", "위치값")
"문자열".lastIndexOf("검색값")
"문자열".lastIndexOf("검색값", "위치값")
const str1 = "javascript reference";
const currentStr1 = str1.indexOf("javascript"); // 0
const currentStr2 = str1.indexOf("reference"); // 11
const currentStr3 = str1.indexOf("j"); // 0
const currentStr4 = str1.indexOf("a"); // 1 : 중복일 땐 가장 처음의 자릿값
const currentStr5 = str1.indexOf("v"); // 2
const currentStr6 = str1.indexOf("jquery"); // -1 : 데이터가 없을 땐 -1
const currentStr7 = str1.indexOf("b"); // -1 : 데이터가 없을 땐 -1
const currentStr8 = str1.indexOf("javascript", 0); // 0
const currentStr9 = str1.indexOf("javascript", 1); // -1
const currentStr10 = str1.indexOf("reference", 0); // 11
const currentStr11 = str1.indexOf("reference", 1); // 11
const currentStr12 = str1.indexOf("reference", 11); // 11
const currentStr13 = str1.indexOf("reference", 12); // -1

const currentStr14 = str1.lastIndexOf("javascript"); //0
const currentStr15 = str1.lastIndexOf("reference"); //11
const currentStr16 = str1.lastIndexOf("j"); //0
const currentStr17 = str1.lastIndexOf("a"); //3
const currentStr18 = str1.lastIndexOf("v"); //2
const currentStr19 = str1.lastIndexOf("jquery"); //-1
const currentStr20 = str1.lastIndexOf("b"); //-1
const currentStr21 = str1.lastIndexOf("javascript", 0); // 0
const currentStr22 = str1.lastIndexOf("javascript", 1); // 0
const currentStr23 = str1.lastIndexOf("reference", 0); // -1
const currentStr24 = str1.lastIndexOf("reference", 1); // -1
const currentStr25 = str1.lastIndexOf("reference", 11); // 11
const currentStr26 = str1.lastIndexOf("reference", 12); // 11

11. includes()

includes() 메서드는 문자열 포함 여부를 검색하여, 불린(true, false)을 반환합니다.

"문자열".includes("문자열")
"문자열".includes("문자열", 위치값)
const str1 = "javascript reference";
const currentStr1 = str1.includes("javascript");    //true
const currentStr2 = str1.includes("j");    //true
const currentStr3 = str1.includes("b");    //false
const currentStr4 = str1.includes("reference");    //true
const currentStr5 = str1.includes("reference", 1);    //true
const currentStr6 = str1.includes("reference", 11);    //true
const currentStr7 = str1.includes("reference", 12);    //false

12. search()

search() 메서드는 문자열(정규식)을 검색하고 위치값(숫자)을 반환합니다. indexOf() 메서드와 비슷하지만, 정규식까지 포함한다는 점이 차이점입니다.

"문자열".search("검색값");
"문자열".search("정규식 표현");
const str1 = "javascript reference";
const currentStr1 = str1.search("javascript");  //0
const currentStr2 = str1.search("reference");   // 11
const currentStr3 = str1.search("j");           // 0
const currentStr4 = str1.search("a");           // 1 : 중복일 땐 가장 처음의 자릿값
const currentStr5 = str1.search("v");           // 2
const currentStr6 = str1.search("jquery");      // -1 : 데이터가 없을 땐 -1
const currentStr7 = str1.search("b");           // -1 : 데이터가 없을 땐 -1
const currentStr8 = str1.search(/[a-z]/g);      //0

13. match()

match() 메서드는 문자열(정규식)을 검색하고 문자열(배열)을 반환합니다.

"문자열".match("검색값");
"문자열".match("정규식 표현");
const str1 = "javascript reference";
const currentStr1 = str1.match("javascript");       //javascript
const currentStr2 = str1.match("reference");        //reference
const currentStr3 = str1.match("r");                //r
const currentStr4 = str1.match(/reference/);        //reference
const currentStr5 = str1.match(/Reference/);        //null
const currentStr6 = str1.match(/Reference/i);       //reference
const currentStr7 = str1.match(/r/g);               //['r', 'r', 'r']
const currentStr8 = str1.match(/e/g);               //['e', 'e', 'e', 'e']

14. charAt() / charCodeAt()

charAt() 위치값 이후 첫 글자를 검색하고 문자열(문자)을 반환합니다. charCodeAt() 메서드는 지정한 숫자 자리의 문자의 유니코드(숫자)를 반환합니다.

"문자열".charAt(숫자);
"문자열".charCodeAt(숫자);
const str1 = "javascript reference";
const currentStr1 = str1.charAt();  //j
const currentStr2 = str1.charAt("0");  //j
const currentStr3 = str1.charAt("1");  //a
const currentStr4 = str1.charAt("2");  //v

const currentStr5 = str1.charCodeAt(); //106
const currentStr6 = str1.charCodeAt("0"); //106
const currentStr7 = str1.charCodeAt("1"); //97
const currentStr8 = str1.charCodeAt("2"); //118

15. startsWidth() / endsWidth()

startWidth() 메서드는 시작하는 분자열에서 문자열을 검색하여 불린(true, false)으로 반환합니다. endsWidth() 메서드는 끝나는 문자열에서 문자열을 검색하여 불린(true, false)으로 반환합니다.

"문자열".startsWidth(검색 문자열);
"문자열".startsWidth(검색 문자열, 위치값);
"문자열".endsWidth(검색 문자열);
"문자열".endsWidth(검색 문자열, 시작 위치값);
const str1 = "javascript reference";
const currentStr1 = str1.startsWith("javascript"); //true
const currentStr2 = str1.startsWith("j"); //true
const currentStr3 = str1.startsWith("java"); //true
const currentStr4 = str1.startsWith("reference"); //false
const currentStr5 = str1.startsWith(); //false
const currentStr6 = str1.startsWith(""); //true
const currentStr7 = str1.startsWith("reference", 7); //false
const currentStr8 = str1.startsWith("reference", 11); //true

const currentStr9 = str1.endsWith("reference"); //true
const currentStr10 = str1.endsWith("e"); //true
const currentStr11 = str1.endsWith("refer"); //false
const currentStr12 = str1.endsWith("javascript"); //false
const currentStr13 = str1.endsWith(); //false
const currentStr14 = str1.endsWith(""); //true
const currentStr15 = str1.endsWith("reference", 7); //false
const currentStr16 = str1.endsWith("reference", 20); //true