차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:javascript:javascript_note:js_string_methods [2021/04/23 15:59]
emblim98
+++ wiki:javascript:javascript_note:js_string_methods [2023/01/13 18:44] (현재)
@@ 줄 258: / 줄 258: @@
 =====The substr() Method=====
-''substr()''은 ''slice();;와 유사합니다.\\
+''substr()''은 ''slice()''와 유사합니다.\\
 \\
 차이점은 두 번째 매개변수가 추출될 부분의 **길이**를 지정한다는 것입니다.\\
@@ 줄 329: / 줄 329: @@
 </body>
 </html>
+</code>
+\\
+기본적으로 ''replace()'' 메서드는 대소 문자를 구분합니다.\\
+대문자로 작성한 MICROSOFT는 작동하지 않습니다.\\
+\\
+<code javascript>
+<!DOCTYPE html>
+<html>
+<body>
+  <h2>JavaScript String Methods</h2>
+  <p>Try to replace "Microsoft" with "W3Schools" in the paragraph below:</p>
+  <button onclick="myFunction()">Try it</button>
+  <p id="demo">Please visit Microsoft!</p>
+  <script>
+    function myFunction() {
+      let str = document.getElementById("demo").innerHTML;
+      let txt = str.replace("MICROSOFT", "W3Schools");
+      document.getElementById("demo").innerHTML = txt;
+    }
+  </script>
+  <P><strong>Note:</strong> Nothing will happen. By default, the replace() method is case sensitive. Writing MICROSOFT (with upper-case) will not work.</P>
+</body>
+</html>
+</code>
+\\
+대소문자 구분없이 교체하기 위해서, ''%%/i%%'' 플래그(대소문자 비구분)와 함께 정규식을 사용하십시오.\\
+\\
+<code javascript>
+  <script>
+    function myFunction() {
+      let str = document.getElementById("demo").innerHTML;
+      let txt = str.replace(/MICROSOFT/i, "W3Schools");
+      document.getElementById("demo").innerHTML = txt;
+    }
+  </script>
+</code>
+\\
+  정규식은 따옴표 없이 작성됩니다.
+\\
+모든 일치 항목을 바꾸려면, **정규식**을  ''%%/g%%'' 플래그 (전역 일치)와 함께 사용하십시오.\\
+<code javascript>
+  <script>
+    function myFunction() {
+      let str = document.getElementById("demo").innerHTML;
+      let txt = str.replace(/Microsoft/g, "W3Schools");
+      document.getElementById("demo").innerHTML = txt;
+    }
+  </script>
 </code>
+===global match & case-insensitive===
+<code javascript>
+  <script>
+    function myFunction() {
+      let str = document.getElementById("demo").innerHTML;
+      let txt = str.replace(/MiCROSOFT/gi, "W3Schools");
+      document.getElementById("demo").innerHTML = txt;
+    }
+  </script>
+</code>
+=====Converting to Upper and Lower Case=====
+문자열은 ''toUpperCase()''를 사용하여 대문자로 변환됩니다.\\
+<code javascript>
+<!DOCTYPE html>
+<html>
+<body>
+  <p>Convert string to upper case:</p>
+  <button onclick="myFunction()">Try it</button>
+  <p id="demo">Bonjour le Monde</p>
+  <script>
+    function myFunction() {
+      let text = document.getElementById("demo").innerHTML;
+      document.getElementById("demo").innerHTML = text.toUpperCase();
+    }
+  </script>
+</body>
+</html>
+</code>
+\\
+''toLowerCase()''를 사용하여 문자열을 소문자로 변환합니다.\\
+<code javascript>
+  <script>
+    function myFunction() {
+      let text = document.getElementById("demo").innerHTML;
+      document.getElementById("demo").innerHTML = text.toLowerCase();
+    }
+  </script>
+</code>
+=====The concat() Method=====
+''concat()''은 두 개 이상의 문자열을 결합합니다.\\
+<code javascript>
+<script>
+    let text1 = "Impossible is";
+    let text2 = "Nothing";
+    let text3 = text1.concat(" ", text2);  // // text1+공백+text2
+    document.getElementById("demo").innerHTML = text3;  // Impossible is Nothing
+  </script>
+</code>
+\\
+더하기 연산자 대신 ''concat()'' 메서드를 사용할 수 있습니다. 아래의 두 줄은 동일합니다.\\
+<code javascript>
+var text = "Hello" + " " + "World!";
+var text = "Hello".concat(" ", "World!");
+</code>
+\\
+  모든 문자열 메서드는 새 문자열을 반환합니다. 원래 문자열을 수정하지 않습니다.
+  공식적으로 말하면: 문자열은 불변(immutable)입니다: 문자열은 변경돌 수 없고, 대체만 가능합니다.
+\\
+=====String.trim()=====
+''trim()'' 메서드는 문자열의 양쪽에 있는 공백을 제거합니다.\\
+<code javascript>
+  <script>
+    function myFunction() {
+      let str = "           Hello World!        ";
+      alert(str.trim());
+    }
+  </script>
+</code>
+\\
+  Internet Explorer 8 이하에서는 trim () 메서드가 지원되지 않습니다.
+\\
+IE 8을 지원해야 하는 경우, 대신 정규식과 함께 ''replace()''를 사용할 수 있습니다.\\
+<code javascript>
+  <script>
+    let str = "      Hello World!     ";
+    alert(str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''));
+  </script>
+</code>
+\\
+위의 replace 해결책을 사용하여 %%JavaScript%% ''String.prototype''에 트림 메서드를 추가할 수도 있습니다.\\
+<code javascript>
+  <script>
+    if (!String.prototype.trim) {
+      String.prototype.trim = function () {
+        return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
+      };
+    }
+    let str = "      Hello World!     ";
+    alert(str.trim());
+  </script>
+</code>
+=====JavaScript String Padding=====
+%%ECMAScript 2017%%은 두 가지 %%String%% 메서드인 ''padStart'' 및 ''padEnd''를 추가하여 문자열의 시작과 끝에서 패딩을 지원합니다.\\
+MDN 추가설명: 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환합니다.\\
+채워넣기는 대상 문자열의 시작(좌측)부터 적용됩니다.\\
+===문법===
+str.padStart(targetLength [, padString])\\
+  * targetLength : 목표 문자열의 길이. 현재 문자열의 길이보다 자가다면 채워넣지 않고 그대로 반환\\
+padString(입력 선택 가능)\\
+  * 현재 문자열에 채워넣을 다른 문자열. 문자열이 너무 길어 목표 문자열 길이를 초과한다면 좌측 일부를 잘라서 넣음. 기본값은 "".(U+0020)\\
+<code javascript>
+  <script>
+    let str = "5";
+    str = str.padStart(4, 0);
+    document.getElementById("demo").innerHTML = str;  // 0005
+  </script>
+</code>
+\\
+<code javascript>
+  <script>
+    let str = "321";
+    str = str.padEnd(4, 0);
+    document.getElementById("demo").innerHTML = str;  // 3210
+  </script>
+</code>
+\\
+Internet Explorer에서는 문자열 패딩이 지원되지 않습니다.\\
+\\
+Firefox와 Safari는 %%JavaScript%% 문자열 패딩을 지원하는 최초의 브라우저였습니다.\\
+=====Extracting String Characters=====
+문자열 문자를 추출하는 방법에는 세 가지가 있습니다.
+  * ''%%charAt(position)%%''
+  * ''%%charCodeAt(position)%%''
+  * 속성 액세스 []
+=====The charAt() Method=====
+''charAt()'' 메서드는 문자열의 지정된 인덱스(위치)에 있는 문자를 반환합니다.\\
+<code javascript>
+  <script>
+    let str = "HELLO WORLD";
+    document.getElementById("demo").innerHTML = str.charAt(6);  // W
+  </script>
+</code>
+=====The charCodeAt() Method=====
+''charCodeAt()'' 메서드는 문자열의 지정된 인덱스에 있는 문자의 유니코드를 반환합니다.\\
+\\
+이 메서드는 UTF-16 코드 (0에서 65535 사이의 정수)를 반환합니다.\\
+<code javascript>
+  <script>
+    let str = "HELLO WORLD";
+    document.getElementById("demo").innerHTML = str.charCodeAt(0);  // 72
+  </script>
+</code>
+=====Property Access=====
+ECMAScript 5 (2009)는 문자열에 대한 속성 액세스%%[ ]%%를 허용합니다.\\
+<code javascript>
+  <script>
+    let str = "HELLO WORLD";
+    document.getElementById("demo").innerHTML = str[8];  // returns R
+  </script>
+</code>
+\\
+  속성 액세스는 약간 예측 불가능할 수 있습니다.
+  * Internet Explorer 7 또는 이전 버전에서는 작동하지 않습니다.
+  * 문자열을 배열처럼 보이게 합니다 (그러나 그렇지 않습니다).
+  * 문자가 없으면, %%[]%%는 %%undefined%%를 반환하고, %%charAt()%%은 빈 문자열을 반환합니다.
+  * 읽기 전용입니다. %%str[0] = "A"%%는 오류를 제공하지 않지만 작동하지 않습니다!
+\\
+<code javascript>
+<script>
+let str = "HELLO WORLD";
+str[0] = "A";     // Gives no error, but does not work
+str[0];           // returns H
+</script>
+</code>
+\\
+  문자열을 배열로 사용하려면, 문자열을 배열로 변환 할 수 있습니다.
+\\
+=====Converting a String to an Array=====
+''split()'' 메서드를 사용하여 문자열을 배열로 변환할 수 있습니다.\\
+<code javascript>
+  <script>
+    function myFunction() {
+      let str = "a, b, c, d, e, f";
+      let arr = str.split(",");
+      console.log(arr);   // (6) ["a", " b", " c", " d", " e", " f"]
+      document.getElementById("demo").innerHTML = arr[2]; // c
+    }
+  </script>
+</code>
+\\
+구분자(separator)를 생략하면, 반환된 배열에는 인덱스 [0]에 전체 문자열이 포함됩니다.\\
+\\
+구분자 기호가 %%""%%인 경우, 반환된 배열은 단일 철자의 배열이 됩니다.\\
+<code javascript>
+  <script>
+    let str = "Bonjour";
+    let arr = str.split("");  // 철자 하나 하나로 쪼개어 배열로 만든다.
+    let arr2 = str.split();   // 구분자 생략, 반환된 배열의 인덱스[0]에 전체 문자열 표시됨
+    let text = "";            // 철자 하나 하나씩
+    let i;                    // 변수 i 선언
+    for (i = 0; i < arr.length; i++) {
+      text += arr[i] + "<br>"
+    }
+    document.getElementById("demo").innerHTML = text;
+    console.log(arr);   // (7) ["B", "o", "n", "j", "o", "u", "r"]
+    console.log(arr2);  // ["Bonjour"]
+  </script>
+</code>
+=====Complete String Reference=====
+전체 참조를 보려면, [[https://www.w3schools.com/jsref/jsref_obj_string.asp|Complete JavaScript String Reference]]로 이동하십시오.\\
+\\
+이 참조에는 모든 문자열 속성 및 메서드에 대한 설명과 예제가 포함되어 있습니다.\\
+\\
 {{tag>오션 Javascript String Methods}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구