###1、字符方法
charAt()和charCodeAt(),這兩個方法都接收一個參數,及基于0的字符位置,charAt()返回的是給定位置的字符,charCodeAt()返回的是給定位置字符的字符編碼。與charCodeAt()對應的一個方法是formCharCode()將字符編碼轉為字符串。?
如:
~~~
<script>
var code = "future";
console.log(code.charAt(2)); //t
console.log(code.charCodeAt(2)) //116
</script>
~~~
除了以上方法外,還可以通過方括號去訪問特定位置的字符,如:
~~~
<script>
var code = "future";
console.log(code[2]); //t
</script>
~~~
使用方括號的方法在IE8,Firefox,Safari,Chrome和Opera中都可以支持,但是在IE7及更早版本中不支持,返回的值為undefined.
### 2、字符串操作方法
1、字符串拼接:concact()方法。
~~~
var a = "my ";
console.log(a.concat("future"));//my future
console.log(a.concat("future ", "will"));//my future will
~~~
2、基于子字符串創建新字符串:slice()、substr()和substring().這三個方法都返回操縱字符串的一個子字符串,而且都接收一到兩個參數。?
第一個參數指定字符串的開始位置,第二個參數(可省略)表示子字符串到哪里結束。slice()和substring()的第二個參數指定的是子字符串最后一個字符后面的位置,而substr()的第二個參數指定的是返回的字符個數。如果省略第二個參數,則截取到字符串最后一個位置。
~~~
var str = "We are family";
console.log(str.slice(2,5)); // ar(從第2個位置開始,不包含第5個位置)
console.log(str.slice(1)); //e are family(從第1個位置開始,一直到最后)
console.log(str.substring(3)); //are family(從第3個位置開始,一直到最后)
console.log(str.substring(3,5));//ar(從第3個位置開始,不包含第5個位置)
console.log(str.substr(2)); // are family(從第2個位置開始,一直到最后)
console.log(str.substr(2,6)); // are f(從第2個位置開始,截取6個字符)
~~~
slice()和substring()方法在正值情況下,實現的功能一致,但是在傳遞的值為負值時,行為就不相同了。?
slice()方法會將傳入的負值與字符串的長度相加(因此,如果兩個參數都會負值,第二個參數必須要大于第一個參數,否則返回的是空字符串)?
substr()方法會將負的第一個參數加上字符串的長度,將將第二個參數轉換為0。(如果第二個參數為負值,返回空的字符串)?
substring()方法將所有的負值參數都轉換為0,substring始終會將較小的參數作為開始位置。
~~~
var str = "Wearefamily"; //length為11
console.log(str.slice(-3,-8));//相當于str.slice(8,3)//返回空字符串
console.log(str.slice(-5,-1));//相當于str.slice(6,10)//返回ami
console.log(str.substring(3,-4));//相當于str.substring(3,0)//返回Wea
console.log(str.substring(-3,-5));//相當于str.substring(0,0)//返回空字符串
console.log(str.substr(-4,3));//相當于substr(7,3)//返回mil
console.log(str.substr(-4,-3));//相當于substr(7,0)//返回空字符串
~~~
### 3、字符串的位置方法
字符串的位置方法:indexOf()和lastIndexOf()。這兩個方法都是從一個字符串中搜索給定的子字符串,然后返回子字符串的位置,沒有找到,返回-1.indexOf()從字符串的開頭向后搜索子字符串,而lastIndexOf()從字符串的末尾向前搜索子字符串。?

~~~
var str = "WEAREFAMILY";
console.log(str.indexOf("A"));//2
console.log(str.lastIndexOf("A"));//6
~~~
### 4.trim()方法
trim()用于去掉字符串收尾的空格
### 5、字符串大小寫轉換方法
轉換為大寫:toUpperCase()和toLocalUpperCase()?
轉換為小寫:toLowerCase()和toLocalLowerCase()
### 6、字符串的模式匹配
match(),replace(),search(),replace()以及split()方法是String類型定義的集中用于在字符串中匹配模式的幾種方法。?
match方法只接收一個參數,要么是一個正則表達式,要么是一個RegExp對象。在字符串上調用match()方法,本質上和調用RegExp的exec()方法相同,返回的是一個數組
~~~
var str = "we are weamy";
var pattern = /we/;
var matches = str.match(pattern);
console.log(matches);//["we", index: 0, input: "we are weamy"]
console.log(pattern.exec(str));//["we", index: 0, input: "we are weamy"]
console.log(matches.index);//0
console.log(matches[0]);//we
~~~
search()的參數與match()相同,不同在于search()返回的是字符串中第一個匹配項的索引;如果沒有找到匹配項,返回-1.?
replace()方法,接收2個參數,第一個參數可以是一個RegExp對象或者是一個字符串,第二個參數是一個字符串或者是一個函數,如果第一個參數是字符串,那么只會替換第一個字符串,如果想要替換所有的字符串,那么必須使用正則表達式,并指定全局標志(g)
~~~
var str = "cat, fat, sat, bat";
console.log(str.replace("at","ooo"));//cooo, fat, sat, bat
console.log(str.replace(/at/g,"ooo"));//cooo, fooo, sooo, booo
~~~
如果replace()的第二個參數是字符串,還可以使用一些特殊的字符序列,將正則表達式操作得到的值插入到結果字符中。?
$$ $?
S& 匹配整個模式的子字符串?
Sn 匹配第n個捕獲組的子字符串
~~~
var str = "cat, fat, sat, bat";
console.log(str.replace("at","ooo"));//cooo, fat, sat, bat
console.log(str.replace(/(.at)/g,"ooo ($1)"));//ooo (cat), ooo (fat), ooo (sat), ooo (bat)
console.log(str.replace(/(.at)/g,"ooo ($&)"));//ooo (cat), ooo (fat), ooo (sat), ooo (bat)
~~~
split()方法接收一個參數作為分隔符,將字符串轉變為數組。?
與之相對應的方法是join(),用作將數組轉變為字符串。
### 7、LocalCompare()方法
這個方法用于字符串的比較。?
如果字符串在字母表中應該拍照字符串參數之前,則返回一個負數。(大多數情況下是-1,具體的值要視實現而定)?
如果字符串等于字符串參數,則返回0.?
如果字符串在字母表中的順序排在字符串參數之后,則返回一個正數。(大多數情況下是1,具體的值要視實現而定)
~~~
var str = "break";
console.log(str.localeCompare("future")); //-1
console.log(str.localeCompare("above")); //1
console.log(str.localeCompare("break")); //0
~~~
- 前言
- jQuery輪播圖插件
- JS模擬事件操作
- JS閉包與變量
- JS綁定事件
- HTML5之file控件
- JavaScript的this詞法
- JavaScript的this詞法(二)
- JS this詞法(三)
- JS檢測瀏覽器插件
- JS拖拽組件開發
- number輸入框
- Modernizr.js和yepnode.js
- DOM變化后事件綁定失效
- div和img之間的縫隙問題
- 詳解JavaScript作用域
- bootstrap入門
- 表單驗證(登錄/注冊)
- Bootstrap網格系統
- Bootstrap排版
- Bootstrap創建表單(一)
- Bootstrap表單(二)
- Bootstrap按鈕
- Bootstrap圖片
- Bootstrap字體圖標(glyphicons)
- Bootstrap的aria-label和aria-labelledby
- Bootstrap下拉菜單
- Bootstrap按鈕組
- Bootstrap按鈕菜單
- Bootstrap輸入框組
- Bootstrap導航元素
- Bootstrap導航欄
- sublimeText頻頻崩潰
- JQuery不同版本的差異(checkbox)
- Bootstrap面包屑導航、分頁、標簽、徽章
- Bootstrap警告
- Bootstrap進度條
- 前端的上傳下載
- JS字符串的相關方法
- CSS3選擇器(全)
- CSS3新增文本屬性詳述
- 利用CSS3實現圖片切換特效
- CSS3新增顏色屬性
- CSS3的border-radius屬性詳解
- JS創建對象幾種不同方法詳解
- JS實現繼承的幾種方式詳述(推薦)
- CSS3響應式布局
- JS模塊化開發(requireJS)
- 利用@font-face實現個性化字體
- 前端在html頁面之間傳遞參數的方法
- CSS自動換行、強制不換行、強制斷行、超出顯示省略號
- 如何在Html中引入外部頁面
- reactJS入門
- React組件生命周期
- 使用React實現類似快遞單號查詢效果
- ReactJS組件生命周期詳述
- React 屬性和狀態詳解