웹 프론트엔드 JS 튜토리얼 JavaScript 문자열 조작 방법 및 브라우저 호환성 예에 대한 자세한 설명

JavaScript 문자열 조작 방법 및 브라우저 호환성 예에 대한 자세한 설명

Jul 25, 2017 pm 02:32 PM
javascript 브라우저

slice()

정의: 하나 또는 두 개의 매개변수를 허용합니다. 첫 번째 매개변수는 하위 문자열의 시작 위치를 지정합니다. 두 번째 매개변수는 하위 문자열의 끝 위치를 나타냅니다(끝 위치의 문자 제외). 두 번째 매개변수가 전달되지 않으면 문자열의 길이가 끝 위치로 사용됩니다.

1. 전달된 매개변수가 양수인 경우:


var str ="helloWorld";
// 一个参数,则将字符串长度作为结束位置
alert(str.slice(3)); // "loWorld"
// 两个参数,7位置上的字符为"r",但不包括结束位置的字符
alert(str.slice(3,7)); // "loWo"
로그인 후 복사

2. 전달된 매개변수가 음수인 경우:


slice()方法会将传入的负值与字符串长度相加。
 var str ="helloWorld";
// 一个参数,与字符串长度相加即为slice(7)
alert(str.slice(-3)); // "rld"
// 两个参数,与字符串长度相加即为slice(3,6)
alert(str.slice(3,-4)); // "loW"
로그인 후 복사

3. :

slice() 메서드로 전달된 두 번째 매개변수가 첫 번째 매개변수보다 작은 경우 빈 문자열이 반환됩니다.


var str ="helloWorld";
alert(str.slice(5,3)); // ""
로그인 후 복사

4. IE 호환성

IE8 브라우저 테스트에서는 문제가 없으며 동작이 최신 브라우저와 일치합니다.

substring()

정의: 하나 또는 두 개의 매개변수를 허용하며 첫 번째 매개변수는 하위 문자열의 시작 위치를 지정합니다. 두 번째 매개변수는 하위 문자열의 끝 위치를 나타냅니다(끝 위치의 문자 제외). 두 번째 매개변수가 전달되지 않으면 문자열의 길이가 끝 위치로 사용됩니다.

1. 전달된 매개변수가 양수 값인 경우: 동작은 Slice() 메서드와 동일합니다.


var str ="helloWorld";
// 一个参数,则将字符串长度作为结束位置
alert(str.substring(3)); // "loWorld"
// 两个参数,7位置上的字符为"r",但不包括结束位置的字符
alert(str.substring(3,7)); // "loWo"
로그인 후 복사

2 전달된 매개변수가 음수 값인 경우:

substring() 메서드는 처리합니다. 모든 음수 매개변수는 0으로 변환됩니다. 예를 살펴보겠습니다.


var str ="helloWorld";
// 两个参数,-4会转换为0,相当于substring(3,0) -->即为 substring(0,3)
alert(str.substring(3,-4)); // "hel"
로그인 후 복사

substring() 메서드는 작은 숫자를 시작 위치로 사용하고 큰 숫자를 끝 위치로 사용합니다. 위의 예에서와 같이 substring(3,0)과 substring(0,3)은 동일한 효과를 갖습니다.

4. IE 호환성

IE8 브라우저 테스트에서는 문제가 없으며 동작이 최신 브라우저와 일치합니다.

substr()

정의: 하나 또는 두 개의 매개변수를 허용합니다. 첫 번째 매개변수는 하위 문자열의 시작 위치를 지정합니다. 두 번째 매개변수는 반환되는 문자 수를 나타내는 이전 방법과 약간 다릅니다. 두 번째 인수가 전달되지 않으면 문자열의 길이가 끝 위치로 사용됩니다. 예를 살펴보겠습니다.

1. 전달된 매개변수가 양수 값인 경우:


var str ="helloWorld";
// 一个参数,则将字符串长度作为结束位置
alert(str.substr(3)); // "loWorld"
// 两个参数,从位置3开始截取后面7个字符
alert(str.substr(3,7)); // "loWorld"
로그인 후 복사

2 전달된 매개변수가 음수 값인 경우:

substr() 메서드는 음수를 먼저 추가합니다. 매개변수 음수 두 번째 인수를 0으로 변환하는 문자열의 길이입니다.


var str ="helloWorld";
// 将第一个负的参数加上字符串的长度--->
//即为:substr(7,5) ,从位置7开始向后截取5个字符
alert(str.substr(-3,5)); // "rld"
// 将第二个参数转换为0
// 即为:substr(3,0),即从位置3截取0个字符串,则返回空
alert(str.substr(3,-2)); // ""
로그인 후 복사

3. IE 호환성

substr() 메서드가 음수 값을 전달하면 문제가 발생하고 원래 문자열이 반환됩니다. IE9에서는 이 문제를 해결합니다.

slice, substr 및 substring의 차이점을 소개하겠습니다

우선 둘 다 두 개의 매개변수를 받습니다. Slice와 substring은 시작 위치와 끝 위치(끝 위치 제외)를 받는 반면 substr은 매개 변수를 받습니다. 반환할 문자열의 시작 위치와 길이입니다. 아래 예를 살펴보세요.


 var test = 'hello world';
  alert(test.slice(,));    //o w
  alert(test.substring(,));   //o w
  alert(test.substr(,));   //o world
로그인 후 복사

여기서 주목해야 할 점은 하위 문자열이 두 매개변수 중 더 작은 매개변수를 시작 위치로 사용하고 더 큰 매개변수를 끝 위치로 사용한다는 것입니다.

예:


alert(test.substring(7,4));   //o w
로그인 후 복사

다음으로, 수신된 매개변수가 음수이면 슬라이스는 해당 문자열의 길이를 해당 음수에 추가하고 결과는 매개변수로 사용됩니다. 첫 번째 매개변수를 추가합니다. 문자열 길이를 추가한 결과는 첫 번째 매개변수로 사용됩니다. 하위 문자열은 단순히 모든 음수 매개변수를 0으로 직접 변환합니다. 테스트 코드는 다음과 같습니다.


var test = 'hello world';  
alert(test.slice(-));   //rld  
alert(test.substring(-));  //hello world  
alert(test.substr(-));  //rld  
alert(test.slice(,-));  //lo w  
alert(test.substring(,-)); //hel  
alert(test.substr(,-));  //空字符串
로그인 후 복사

참고: IE에서는 음수 값을 수신하는 substr을 처리하는 중 오류가 발생하여 원래 문자열을 반환합니다.

위 내용은 JavaScript 문자열 조작 방법 및 브라우저 호환성 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Safari의 로컬 웹 페이지에서 맞춤형 스타일 시트가 적용되지만 Baidu 페이지에서는 그렇지 않은 이유는 무엇입니까? Safari의 로컬 웹 페이지에서 맞춤형 스타일 시트가 적용되지만 Baidu 페이지에서는 그렇지 않은 이유는 무엇입니까? Apr 05, 2025 pm 05:15 PM

Safari에서 사용자 정의 스타일 시트 사용에 대한 토론 오늘 우리는 Safari 브라우저에 대한 사용자 정의 스타일 시트 적용에 대한 질문에 대해 논의 할 것입니다. 프론트 엔드 초보자 ...

CSS를 통해 크기 조정 기호를 사용자 정의하고 배경색으로 균일하게 만드는 방법은 무엇입니까? CSS를 통해 크기 조정 기호를 사용자 정의하고 배경색으로 균일하게 만드는 방법은 무엇입니까? Apr 05, 2025 pm 02:30 PM

CSS에서 크기 조정 기호를 사용자 정의하는 방법은 배경색으로 통합됩니다. 매일 개발에서, 우리는 종종 조정과 같은 사용자 인터페이스 세부 정보를 사용자 정의 해야하는 상황을 발생시킵니다.

웹 페이지에 로컬로 설치된 'Jingnan Mai Round Body'를 올바르게 표시하는 방법은 무엇입니까? 웹 페이지에 로컬로 설치된 'Jingnan Mai Round Body'를 올바르게 표시하는 방법은 무엇입니까? Apr 05, 2025 pm 10:33 PM

최근 웹 페이지에 로컬로 설치된 글꼴 파일을 사용하여 인터넷에서 무료 글꼴을 다운로드하여 시스템에 성공적으로 설치했습니다. 지금...

JavaScript 또는 CSS를 통해 브라우저 인쇄 설정에서 페이지 상단 및 끝을 제어하는 ​​방법은 무엇입니까? JavaScript 또는 CSS를 통해 브라우저 인쇄 설정에서 페이지 상단 및 끝을 제어하는 ​​방법은 무엇입니까? Apr 05, 2025 pm 10:39 PM

브라우저의 인쇄 설정에서 페이지의 상단과 끝을 제어하기 위해 JavaScript 또는 CSS를 사용하는 방법. 브라우저의 인쇄 설정에는 디스플레이가 ...인지 제어 할 수있는 옵션이 있습니다.

웹 페이지에서 로컬로 설치된 글꼴 파일을 사용하는 방법은 무엇입니까? 웹 페이지에서 로컬로 설치된 글꼴 파일을 사용하는 방법은 무엇입니까? Apr 05, 2025 pm 10:57 PM

웹 페이지에서 로컬로 설치된 글꼴 파일을 사용하는 방법 웹 페이지 개발 에서이 상황이 발생 했습니까? 컴퓨터에 글꼴을 설치했습니다 ...

부정적인 마진이 어떤 경우에는 적용되지 않는 이유는 무엇입니까? 이 문제를 해결하는 방법? 부정적인 마진이 어떤 경우에는 적용되지 않는 이유는 무엇입니까? 이 문제를 해결하는 방법? Apr 05, 2025 pm 10:18 PM

어떤 경우에는 부정적인 마진이 적용되지 않는 이유는 무엇입니까? 프로그래밍 중에 CSS의 부정적인 마진 (음수 ...

플렉스 레이아웃 아래의 텍스트는 생략되지만 컨테이너가 열려 있습니까? 그것을 해결하는 방법? 플렉스 레이아웃 아래의 텍스트는 생략되지만 컨테이너가 열려 있습니까? 그것을 해결하는 방법? Apr 05, 2025 pm 11:00 PM

Flex 레이아웃 및 솔루션에서 텍스트를 과도하게 누락하여 컨테이너 개구부 문제가 사용됩니다 ...

웹 회전식 다이어그램에 대한 JavaScript 코드를 효율적으로 추출하는 방법은 무엇입니까? 웹 회전식 다이어그램에 대한 JavaScript 코드를 효율적으로 추출하는 방법은 무엇입니까? Apr 05, 2025 pm 12:18 PM

Baidu News Homepage의 Carousel Code부터 많은 사람들이 Baidu New와 같은 유사한 웹 페이지 효과를 달성하기 위해 웹 페이지에서 JavaScript 코드를 추출하기를 희망합니다.

See all articles