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

템플릿 문자열은 내장된 표현을 사용하는 문자열이다.

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

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

const num1 = 100;
const num2 = 200;

//02
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
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 = "4";
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 currentStr1 = 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 = currentStr1;

const str2 = "JAVASCRIPT";
const currentStr2 = str1.toLowerCase();

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

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

앞 뒤 공백을 제거한다.

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

document.querySelector(".sample03_N1").innerHTML = "1";
document.querySelector(".sample03_Q1").innerHTML = "javascript";
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 cuurrentStr1 = str1.slice(0);                  // javascript reference
const cuurrentStr2 = str1.slice(1);                  // avascript reference
const cuurrentStr3 = str1.slice(2);                  // vascript reference
const cuurrentStr4 = str1.slice(0, 1);              // j
const cuurrentStr5 = str1.slice(0, 2);              // ja
const cuurrentStr6 = str1.slice(0, 3);              // jav
const cuurrentStr7 = str1.slice(1, 2);              // a 
const cuurrentStr8 = str1.slice(1, 3);              // av
const cuurrentStr9 = str1.slice(1, 4);              // ava
const cuurrentStr10 = str1.slice(-1);               // e
const cuurrentStr11 = str1.slice(-2);               // ce
const cuurrentStr12 = str1.slice(-3);               // nce
const cuurrentStr13 = str1.slice(-3, -1);          // nc
const cuurrentStr14 = str1.slice(-3, -2);          // c
const cuurrentStr15 = str1.slice(-3, -3);          //
const cuurrentStr16 = str1.slice(1, 4);             // ava
const cuurrentStr17 = str1.slice(4, 1);             // ''

const cuurrentStr18 = str1.substring(1, 4);      // ava  // substring은 자동으로 변환해줌
const cuurrentStr19 = str1.substring(4, 1);      // ava  // substring은 자동으로 변환해줌

const cuurrentStr20 = str1.substr(0);               // javascript reference
const cuurrentStr21 = str1.substr(1);               // avascript reference
const cuurrentStr22 = str1.substr(2);               // avascript reference
const cuurrentStr23 = str1.substr(0, 1);           // j
const cuurrentStr24 = str1.substr(0, 2);           // ja
const cuurrentStr25 = str1.substr(0, 3);           // jav
const cuurrentStr26 = str1.substr(1, 2);           // av
const cuurrentStr27 = str1.substr(1, 3);           // ava
const cuurrentStr28 = str1.substr(1, 4);           // avas
const cuurrentStr29 = str1.substr(-1);             // e
const cuurrentStr30 = str1.substr(-2);             // ce
const cuurrentStr31 = str1.substr(-3);             // nce
const cuurrentStr32 = str1.substr(-1, 1);         // e
const cuurrentStr33 = str1.substr(-2, 2);         // ce
const cuurrentStr34 = str1.substr(-3, 3);         // nce

05. 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 cuurrentStr10 = str2.split('/');                            // ['java', 'script', 'refer', 'ence']

const str3 = "java&script&refer!ence";
const cuurrentStr11 = str3.split('!');                             // ['java&script&refer', 'ence']
const cuurrentStr12 = str3.split('&');                            // ['java/script', 'refer!ence']
const cuurrentStr13 = str3.split(/&|\!/);                     // ['java', 'script', 'refer', 'ence']

const str4 = "javascript reference";
const cuurrentStr14 = str4.split('').join();                     // j,a,v,a,s,c,r,i,p,t, ,r,e,f,e,r,e,n,c,e
const cuurrentStr15 = str4.split('').join('*');                  // j*a*v*a*s*c*r*i*p*t* *r*e*f*e*r*e*n*c*e
const cuurrentStr16 = str4.split('').reverse().join('');    // ecnerefer tpircsavaj
const cuurrentStr17 = 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() 메서드는 문자열을 부분 문자로 구분하고 배열로 반환한다.

const str1 = "javascript reference"
    
const cirrentStr1 = str1.replace("javascript", "자바스크립트")         // 자바스크립트 reference
const cirrentStr2 = str1.replace("j", "J")                                          // Javascript reference
const cirrentStr3 = str1.replace("e", "E")                                         // Javascript rEference
const cirrentStr4 = str1.replaceAll("e", "E")                                     // Javascript rEfErEncE
const cirrentStr5 = str1.replaceAll(/e/g, "E")                                   // Javascript rEfErEncE
const cirrentStr6 = str1.replaceAll(/e/gi, "E")                                  // Javascript rEfErEncE

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

const str3 = "010-2000-1000";
const cirrentStr8 = str3.replace("-","")                                             // 0102000-1000
const cirrentStr9 = str3.replaceAll("-","")                                         // 01020001000
const cirrentStr10 = str3.replaceAll(/-/g,"")                                     // 01020001000
const cirrentStr11 = str3.replaceAll(/-/g," ")                                    // 010 2000 1000
const cirrentStr12 = str3.replaceAll("-","*")                                      // 010*2000*1000
const cirrentStr13 = str3.replaceAll(/[1,2]/g, "*")                            // 010*2000*1000

07. 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()

문자열을 복사하여, 복사한 새로운 문자열을 반환한다.

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() 메서드는 주어진 길이에 맞게 앞/뒤 문자열을 채우고, 새로운 문자열을 반환한다.

const str1 = "123"

const currentStr1 = str1.padStart(1, "0");              // 123
const currentStr2 = str1.padStart(2, "0");              // 123
const currentStr3 = str1.padStart(3, "0");              // 123
const currentStr4 = str1.padStart(4, "0");              // 0123     // 해당부터 길이가 4자리로 늘어나기에 0추가
const currentStr5 = str1.padStart(5, "0");              // 00123
const currentStr6 = str1.padStart(6, "0");              // 000123
const currentStr7 = str1.padStart(6, "1");              // 111123
const currentStr8 = str1.padStart(6, "12");            // 121123
const currentStr9 = str1.padStart(6, "123");          // 123123
const currentStr10 = str1.padStart(6, "1234");      // 123123
const currentStr11 = str1.padStart(6);                   //    123

const currentStr12 = str1.padEnd(1, "0");              // 123
const currentStr13 = str1.padEnd(2, "0");              // 123
const currentStr14 = str1.padEnd(3, "0");              // 123
const currentStr15 = str1.padEnd(4, "0");              // 1230     // 해당부터 길이가 4자리로 늘어나기에 0추가
const currentStr16 = str1.padEnd(5, "0");              // 12300
const currentStr17 = str1.padEnd(6, "0");              // 123000
const currentStr18 = str1.padEnd(6, "1");              // 123111
const currentStr19 = str1.padEnd(6, "12");            // 123121
const currentStr20 = str1.padEnd(6, "123");          // 123123
const currentStr21 = str1.padEnd(6, "1234");        // 123123
const currentStr22 = str1.padEnd(6);                     // 123___   //_은 공백를 의미

10. indexOf() / lastIndexOf()

문자열에서 특정 문자의 위치를 찾고 숫자를 반환하는 메서드이다.

"문자열".index(검색값)
"문자열".index(검색값, 위치값)
"문자열".lastIndexOf(검색값)
"문자열".lastIndexOf(검색값, 위치값) 
const str1 = "javascript reference"
    
const currentStr1 = str1.indexOf("javascipt")                     // 00
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("jqeurey")                        // -1
const currentStr8 = str1.indexOf("javascipt", 0)                 // 0
const currentStr9 = str1.indexOf("javascipt", 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("javascipt")              // 0
const currentStr15 = str1.lastIndexOf("reference")             // 11
const currentStr16 = str1.lastIndexOf("j")                            // 0
const currentStr17 = str1.lastIndexOf("a")                           // 3    // 뒤에서 기준을 잡기에 3
const currentStr18 = str1.lastIndexOf("v")                           // 2
const currentStr19 = str1.lastIndexOf("jqeurey")                 // -1
const currentStr20 = str1.lastIndexOf("b")                           // -1
const currentStr21 = str1.lastIndexOf("javascipt", 0)           // 0
const currentStr22 = str1.lastIndexOf("javascipt", 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()

문자열 포함여부를 검색하여, 불린(true, false)를 반환한다.

"문자열".includes(검색값)
"문자열".includes(검색값, 위치값) 
const str = "javascript reference";

const currentStr1 = str1.includes("javascript")             // true
const currentStr2 = str1.includes("j")                            // true
const currentStr3 = str1.includes("b")                           // flase    //포함하고 있지 않기에 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("검색값");
"문자열".search(정규식 표현); 
const str1 ="javascript reference"

const currentStr1 = str1.search("javascipt");           // 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("jqeurey");             // -1
const currentStr7 = str1.search("b");                        // -1
const currentStr8 = str1.search(/[a-z]/g);                // 0

13. match()

문자열(정규식)을 검색하고, 위치 값(배열)을 반환한다.

const str1 ="javascript reference"

const currentStr1 = str1.match("javascipt");         // javascipt
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 i는 소,대문자 구별x
const currentStr7 = str1.match(/r/g);                    // ['r', 'r', 'r']
const currentStr8 = str1.match(/e/g);                   // ['e', 'e', 'e', 'e']

14. charAt() / charCodeAt()

charAt() 메서드는 지정한 숫자(index)의 단일 문자 값을 반환한다.
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 cirrentStr5 = str1. charCodeAt();     // 106
const cirrentStr6 = str1. charCodeAt("0");  // 106
const cirrentStr7 = str1. charCodeAt("1");  // 97
const cirrentStr8 = str1. charCodeAt("2");  // 18

15. startsWith() / endsWith()

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

"문자열".startsWith(검색 문자열);
"문자열".startsWith(검색 문자열, 위치값);
"문자열".endsWith(검색 문자열);
"문자열".endsWith(검색 문자열, 시작 위치값); 
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');            // true
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