• 회원가입
  • 로그인
  • 구글아이디로 로그인

[String] JS - slice() 메서드 - 문자열 자르기 (= 문자열 일부 추출 = slice메서드 = 슬라이스 메서드) ※ 휴대폰 010만 입력 허용

목차
  1. slice() 예제 - 문자열 자르기 (= 문자열 일부 추출)
  2. slice() 정의
  3. slice() 구문
  4. slice() 예제1 - 첫번째 문자만 추출
  5. slice() 예제2 - 마지막 글자만 추출
  6. slice() 예제3 - 마지막 3글자만 추출
  7. slice() 예제 - 년월일 숫자 쪼개서 단위 붙이기
  8. slice() 예제 - 휴대폰 010 시작 전화번호만 입력 허용

 

slice() 예제 - 문자열 자르기 (= 문자열 일부 추출) 

 

<button onclick="homzzang()">클릭</button>


<p id="demo"></p>


<script>

function homzzang() {

  var str = "홈짱닷컴 Homzzang.com"; 

  var res = str.slice(5, 17);

  document.getElementById("demo").innerHTML = res;

}

</script>

 

결과보기

결과값: Homzzang.com

 

slice() 정의

 

문자열 일부 추출해 새 문자열로 반환.

 


 

1.

  • 시작 및 종료 매개변수 사용해 추출할 문자열 부분 지정.
  • start ≤ 추출범위 < end

 

2.

  • 첫 번째 문자의 위치는 0이고, 두 번째 문자의 위치는 1.
  • 문자열 끝에서 선택하려면 음수 사용.


3.

  • 첫글자만 추출 (예제1) : slice (0, 1)
  • 끝글자만 추출 (예제2) : slice (-1)
  • 끝몇글자 추출 (예제3) : slice(-n, str.length) 

 

4.

모든 브라우저 지원

 

5.

ECMAScript 1

 

 

slice() 구문

 

string.slice(start, end)

 


[매개변수]

 

start

필수. 추출시작위치 (※ 첫글자 순번 : 0)

 

end

선택. 추출종료위치 (※ 포함 안 함)

만약, 생략된 경우, 시작위치부터 마지막 글자까지 추출. 

 

 

slice() 예제1 - 첫번째 문자만 추출

 

<button onclick="homzzang()">클릭</button>


<p id="demo"></p>


<script>

function homzzang() {

  var str = "홈짱닷컴 Homzzang.com"; 

  var res = str.slice(0, 1);

  document.getElementById("demo").innerHTML = res;

}

</script>

 

결과보기

결과값: 홈

 

slice() 예제2 - 마지막 글자만 추출

 

<button onclick="homzzang()">클릭</button>


<p id="demo"></p>


<script>

function homzzang() {

  var str = "홈짱닷컴 Homzzang.com"; 

  var res = str.slice(-1);

  document.getElementById("demo").innerHTML = res;

}

</script>

 

결과보기

결과값: m

 

slice() 예제3 - 마지막 3글자만 추출

 

<button onclick="homzzang()">클릭</button>


<p id="demo"></p>


<script>

function homzzang() {

  var str = "홈짱닷컴 Homzzang.com"; 

  var res = str.slice(-3,str.length);

  document.getElementById("demo").innerHTML = res;

}

</script>

 

결과보기

결과값: com

 

slice() 예제 - 년월일 숫자 쪼개서 단위 붙이기

 

<script>

day = "20211218";

document.write("<div>" + day.slice(0, 4) + "년 " + day.slice(4, 6) + "월 " + day.slice(6, 8) + "일</div>");

</script>

 

결과보기

PS. PHP 경우, substr() 함수 이용.

비타주리 님 (211218) https://sir.kr/qa/442461

 

slice() 예제 - 휴대폰 010 시작 전화번호만 입력 허용

 

<label for="hz">휴대폰</label><input type="text" id=hz>


<script>

hz.onkeyup = function() {

    if (this.value.length >= 3 && this.value.slice(0, 3) != "010") this.value = "";

}

</script>

 

결과보기

비타주리 님 (220130) https://sir.kr/qa/447539


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Number JS - NEGATIVE_INFINITY - 음의 무한대
Number JS - NaN ★ - 숫자유형에 속하나, 유효한 숫자가 아닌 값 (= NaN속성값 = 난값)
Number JS - POSITIVE_INFINITY - 양의 무한대
Number JS - prototype 속성(숫자) - 사용자정의 속성/메서드 추가 (숫자객체경우 = 프로토타입)
Number JS - isFinite() 함수 - 유효한 유한수인지 판별 [Number객체함수] (IE12 이상)
Number JS - isInteger() 메서드 - 정수인지 판별 (IE12 이상)
Number JS - isNaN() 메서드 - NaN인지 판별 (IE12 이상)
Number JS - isSafeInteger() 메서드 - 안전한 정수인지 판별 (IE12 이상)
Number JS - toExponential() 메서드 - 숫자를 지수 표기법으로 변환
Number JS - toFixed() 메서드 - 지정소수자릿수 숫자 문자열로 변환 (= toFixed메서드 = 투픽스트…
Number JS - toPrecision() 메서드 - 숫자를 지정 길이로 변환 (= 투프리시전)
Number JS - toString() 메서드(숫자경우) - 숫자를 문자열타입으로 변경 (= toString메서드 = …
Number JS - valueOf() 메서드 - 객체값 (숫자자체 = valueOf메서드 = 밸류어브)
Operator JS - 연산자 (Operator)
Operator JS - 산술연산자 (Arithmetic Operator)
Operator JS - 할당연산자 (Assignment Operator)
Operator JS - 문자열연산자 (= String Operator = 연결연산자 Concatenation Operato…
Operator JS - 비교연산자 (Comparison Operator)
Operator JS - 논리연산자 (Logical Operator)
Operator JS - 비트연산자 (Bitwise Operator)
8/67
목록
찾아주셔서 감사합니다. Since 2012