JavaScript字串“三劍客”
JavaScript字串方法有很多,其中有三個方法與字串裁剪有關,他們分別是slice()、substring()和substr(),我把他們統稱為“三劍客”。
由於他們都是用於裁剪字串,很容易混淆,所以接下來我將結合具體例項來講講他們的共同點和區別。
一、共同點
① 接受一個或兩個引數,其中第一個引數為裁剪的開始位置
② 都會返回被裁剪下來的子字串,而原字串不受影響
③ 若不傳第二個引數,則從開始位置(第一個引數)一直擷取到字串結尾。
var str = `微信公眾號:前端微站`;
var str1 = str.slice(2);
console.log(str1); // "公眾號:前端微站"
str1 = str.substring(2);
console.log(str1); // "公眾號:前端微站"
str1 = str.substr(2);
console.log(str1); // "公眾號:前端微站"
console.log(str); // "微信公眾號:前端微站"
可以看出,當只傳入一個引數時,這三個方法的用法和作用都是一致的,都是將“公”字(索引值為2)一直到字串末尾的字串裁剪下來並返回,並且都不會影響到原字串。
二、區別
① slice()和substring()的第二個引數均表示的是裁剪的結束位置(但不包括該項,這與陣列中的slice()方法類似),而substr()的第二個引數則表示的是裁剪下來字串長度
② 當傳入的引數為負值時,slice()會將所有負引數與字串的長度相加,substring()會把所有負引數都轉換為0,而substr()就相對比較複雜了,它會將第一個負引數加上字串長度,第二個引數轉換為0
1. 引數均為正數
var str = `微信公眾號:前端微站`;
var str1 = str.slice(2,5);
console.log(str1); // "公眾號"
str1 = str.substring(2,5);
console.log(str1); // "公眾號"
str1 = str.substr(2,3);
console.log(str1); // "公眾號"
很明顯,slice()和substring()用法一致,兩個引數分別都表示的是起始位置2和結束位置5,不包含結束位置5所在字元(“:”),而substr()第二個參數列示的是要裁剪下來的字串長度,例項中是裁剪3個字元。
2. 引數存在負數
var str = `微信公眾號:前端微站`;
console.log(str.length); // 10
var str1 = str.slice(-4); // 相當於str.slice(6)
console.log(str1); // "前端微站"
str1 = str.substring(-4); // 相當於str.substring(0)
console.log(str1); // "微信公眾號:前端微站"
str1 = str.substr(-4); // 相當於str.substr(6)
console.log(str1); // "前端微站"
var str2 = str.slice(2,-4); // 相當於str.slice(2,6)
console.log(str2); // "公眾號:"
str2 = str.substring(2,-4); // 相當於str.substring(2,0),也就是str.substring(0,2)
console.log(str2); // "微信"
str2 = str.substr(2,-4); // 相當於str.substr(2,0)
console.log(str2); // ""
var str3 = str.slice(-2,-4); // 相當於str.slice(8,6)
console.log(str3); // ""
str3 = str.substring(-2,-4); // 相當於str.substring(0,0)
console.log(str3); // ""
str3 = str.substr(-2,-4); // 相當於str.substr(8,0)
console.log(str3); // ""
var str4 = str.slice(-4,-2); // 相當於str.slice(6,8)
console.log(str4); // "前端"
str4 = str.substring(-4,-2); // 相當於str.substring(0,0)
console.log(str4); // ""
str4 = str.substr(-4,-2); // 相當於str.substr(6,0)
console.log(str4); // ""
當引數為負數時,只需牢記,slice見負加總長,substring見負則歸零,substr一加總長一歸零。 另外還需要特別注意的一點是,slice()第一個引數須小於第二個引數才能正常擷取字串,否則返回的是空字串,而substring()則沒有這個問題。
本文重點總結:
① substr()第二個引數是裁剪長度,只要為負,裁剪結果必定是空字串
② 不管如何裁剪,均不影響原字串
③ 當引數為負,slice加總長,substring則歸零,substr一加總長一歸零。
相關文章
- Linux (三劍客之一) grep字串搜尋命令詳解Linux字串
- 前端三劍客之HTML前端HTML
- 四劍客第三關
- 面試常備,字串三劍客 String、StringBuffer、StringBuilder面試字串UI
- Linux 三劍客之sedLinux
- CSS陰影效果三劍客CSS
- JRuby GUI API三劍客GUIAPI
- Linux文字三劍客總結Linux
- 三劍客 Handler、Looper 和 MessageQueueOOP
- Linux三大劍客之awkLinux
- Linux (三劍客之三) awk命令詳解Linux
- 玩轉Git三劍客-蘇玲-極客時間Git
- JS動畫三劍客——setTimeout、setInterval、requestAnimationFrameJS動畫requestAnimationFrame
- MySQL 核心三劍客 —— 索引、鎖、事務MySql索引
- Android佈局優化三劍客Android優化
- Linux三劍客之awk詳解Linux
- Linux三劍客之grep詳解Linux
- 資料分析三劍客之一numpy
- Linux三劍客grep、awk和sedLinux
- Docker(五):Docker 三劍客之 Docker MachineDockerMac
- Docker(六):Docker 三劍客之 Docker SwarmDockerSwarm
- Docker及三劍客(Compose、Machine、Swarm)DockerMacSwarm
- 使用linux三劍客取ip地址Linux
- 併發三劍客之限流方案總結
- 006 Linux 命令三劍客之-grepLinux
- 敏捷績效管理三劍客:OKR 、KPI、CFR敏捷OKRKPI
- Linux 三劍客之 grep 使用詳解Linux
- 轉:Android佈局優化三劍客Android優化
- linux三劍客(grep、sed、awk)基本使用Linux
- 007 Linux 命令三劍客之-awkLinux
- Linux三劍客之awk入門指引Linux
- Docker(四):Docker 三劍客之 Docker ComposeDocker
- Linux系統命令三劍客之 awkLinux
- 容器技術|Docker三劍客之docker-swarmDockerSwarm
- Linux三劍客Awk、Sed、Grep 命令詳解Linux
- Linux 三劍客 Awk、Sed、Grep 命令詳解Linux
- 【案例】Linux三劍客中awk命令如何使用?Linux
- Linux檔案處理三劍客之sedLinux