コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

JavaScript String オブジェクトのコード例を深く理解する

黄舟
リリース： 2017-03-14 15:35:25
オリジナル
985 人が閲覧しました

この記事では、開発者が JavaScript 開発で 文字列 をより適切に扱えるように、主に JavaScript における Stringobject の具体的な使用方法と String オブジェクトに関連するメソッドを紹介および分析します。

1. 部分文字列のインターセプト、文字列/文字の検索、大文字と小文字の変換などの文字列に対する操作を実行するための

String オブジェクトを導入します。

2. 定義メソッド

2.1 new String(Value) Constructor: 内容がValueであるStringオブジェクトを返す
パラメータ:

①value {String}: String

戻り値:

{String Object}内容が Value である String オブジェクトを返します

Example:

var demoStr = new String('abc');
console.log(typeof demoStr); // => object
console.log(demoStr); // => abc
ログイン後にコピー

2.2 直接代入 (推奨)
Example:

var demoStr = 'abc';
console.log(typeof demoStr); // string
console.log(demoStr); // => abc
ログイン後にコピー

3. ExampleProperty

3.1 length: 文字列内の文字数を返します

var s = 'abc';
console.log(s.length); // => 3
console.log('新年快乐'.length); // => 4 ：一个中文字符也计算为1个数量
console.log(''.length); // => 0 ：空字符串返回0
ログイン後にコピー

4 . インスタンス メソッド

注: 文字列のインスタンス メソッドは文字列自体を変更するのではなく、操作の結果を返すだけです。

4.1 charAt(index): 文字列内の指定された位置の文字を0から返します。 存在しない値が渡された場合は、空の文字列が返されます。
パラメータ:

①index {int }: 位置 index 、0 から数えます

戻り値:

{string} 存在しない位置値が渡された場合は、空の文字列が返されます

例: 

var s = 'abc';
console.log(s.charAt(1)); // => b ：返回位置为1的字符
console.log(s); // => 不影响原来的数组
console.log(s.charAt(5)); // => '' ：获取一个不存在位置的字符，返回一个长度为0的空字符串
ログイン後にコピー

4.2 charCodeAt (index): 文字列内の指定された位置にある文字の Unicode エンコーディングを返します。 パラメータ:

①index {int}: 0 から計算される位置インデックス。 戻り値:

{number}文字列内の指定された位置にある文字。存在しない位置の値が渡された場合は、NaN が返されます

例:

var s = 'abc';
console.log(s.charCodeAt(0)); // => 98 ：字符b的Unicode编码
console.log(s.charCodeAt(5)); // => NaN ：获取一个不存在位置的字符，返回NaN
ログイン後にコピー

4.3 concat(value1,value2...valueN): 1 つまたはさらに文字列を追加し、連結された文字列を返します

パラメータ ：

①value1,value2 … valueN {string} ：1つ以上の文字列

戻り値:

{string} 連結された文字列を返します

例: 

var s = 'abc';
console.log(s.concat('d')); // => abcd
console.log(s); // => abc ：不影响原先的字符串
console.log(s.concat('d', 'e')); // => abcde
ログイン後にコピー

4.4indexOf(value , |start

Position

): インスタンス内で前から後ろに文字列または文字を検索し、見つかった位置を返します (0 から数えます)。見つからない場合は、-1 を返します

パラメータ: ①value {string}: 検索する文字列

②startPosition {int} オプション: 検索を開始する開始位置、デフォルトでは位置 0 から始まります

戻り値:

{int} 見つかった位置を返します (0 から数えます)。見つからない場合は、-1 を返します

例: 

var s = 'abc';
console.log(s.indexOf('b')); // => 1
console.log(s.indexOf('d')); // => -1 ：未找到
console.log(s.indexOf('b', 2)); // => -1 ：从位置2(第3个字符处)开始查找
ログイン後にコピー

4.5 lastIndexOf(value, |startPosition): インスタンス内で文字列または文字を後ろから前に検索し、見つかった位置 (0 から数えて) を返します。見つからない場合は -1 を返します

パラメータ:

①value {string}: 検索する文字列

②startPosition {int} オプション: 検索を開始する開始位置、デフォルトでは末尾から検索します

Return value:

{ int} 見つかった位置を返します (0 から数えます)。見つからない場合は-1を返す

例:

var s = 'abcabc';
console.log(s.lastIndexOf('a')); // => 3 ：从后往前查找
console.log(s.lastIndexOf('d')); // => -1 ：未找到返回-1
console.log(s.lastIndexOf('a', 2)); // => 0 ：从位置2(第3个字符处)开始往前查找
ログイン後にコピー

4.6 localeCompare(value): インスタンスとパラメータを比較し、比較結果を返す

パラメータ:

①value {string}: 比較する文字列

戻り値:

0: インスタンスはパラメーターより大きいです

1: インスタンスはパラメーターと等しいです

-1: インスタンスはパラメーターより小さいです

例: 

var s='abc';
console.log(s.localeCompare('ab')); // => 1 ：实例比参数大
console.log(s.localeCompare('abc')); // => 0 ：实例与参数相等
console.log(s.localeCompare('abd')); // => -1 ：实例比参数小
ログイン後にコピー

4.7 match(regexp):

を使用します一致検索用の正規表現

パラメータ:

①regexp {regexp}: 正規表現、例:/d+/
戻り値:

正規表現に属性 'g' があるかどうかに応じて、異なる結果を返します。一致しない場合、{

null

} が返されます:

①正規表現には属性 'g' がなく、一致を実行し、{単一の一致} 結果オブジェクトを返します。オブジェクトには次の属性が含まれます: 配列シリアル。数値: 一致結果を示します。0 は一致するテキスト、1 は右から最初の丸括弧が結果と一致し、2 が 2 番目の丸括弧などとなります

index 属性: 一致するテキストの開始位置を示します一致するソースで

入力属性: 一致するソースを示します

②属性「g」を持つ正規表現、グローバルマッチングを実行し、文字列内の一致するオブジェクトをすべて検索し、{文字列配列}を返します: 配列要素には一致する各オブジェクトが含まれます文字列内に正規表現括弧内の文字列は含まれず、インデックスと入力も提供されません。

例:

// 1.单个匹配
var s = 'a1b2c3d4';
var mc = s.match(/\d+/); // => 获取第一个正则匹配的结果
if (mc != null) {
    console.log(mc.index); // => 1 ：匹配结果在匹配源的起始位置
    console.log(mc.input) // => a1b2c3d4 ：匹配源
    console.log(mc[0]); // => 1 ：获取匹配到的结果
}
// 2.全局匹配
var mcArray = s.match(/\d+/g); // => 获取全部正则匹配的数字
if (mcArray != null) {
    for (var i = 0,len=mcArray.length; i < len; i++) {
        var mc=mcArray[i];
        console.log(mc); // => 1,2,3,4 ：获取匹配到的结果
    }
}
// 3.带括号的匹配
s = &#39;a1b2c3d4&#39;;
mc = s.match(/[a-z]([1-9])/); // => 获取第一个正则匹配的结果
if (mc != null) {
    console.log(mc.index); // => 0 ：匹配结果在匹配源的起始位置
    console.log(mc.input) // => a1b2c3d4 ：匹配源
    console.log(mc[0]); // => a1 ：序号0表示匹配到的结果
    console.log(mc[1]); // => 1 ：序号1表示第一个括号内的子匹配结果
}
ログイン後にコピー

4.8 replace(regexp, replaceStr): 正規表現で一致した部分文字列を置換し、置換後の文字列を返します

パラメータ:

①regexp {regexp}: 正規表現。例:/d+/


②replaceStr {文字列関数}:

1）若是字符串，表示替换的字符串，匹配到字串都替换成此字符串；

字符串中的$字符有特殊的含义：

$1,$2 … $99 ：表示①参从左到右圆括号的匹配子项

$& ：表示整个①参匹配的子项

$$ ：美元符号

2）若是函数，表示每个匹配结果都调用此函数，函数的唯一参数为匹配结果,并返回一个替换结果。

返回值：

{string} 返回一个替换后的字符串

示例：

var oldStr = &#39;a1b2c3d4&#39;;
// 1.正则匹配到【所有】数字，替换成：&#39;,&#39;逗号
var newStr = oldStr.replace(/\d+/g, &#39;,&#39;);
console.log(newStr); // => a,b,c,d,
// 2.正则匹配到【所有】数字，替换成：匹配结果 + &#39;,&#39;逗号
newStr = oldStr.replace(/\d+/g, &#39;$&,&#39;);
console.log(newStr); // => a1,b2,c3,d4,
// 3.正则匹配到【所有】数字，每个匹配结果都调用函数，并返回替换后的结果
newStr = oldStr.replace(/\d+/g, function (word) {
    if (word % 2 == 0) {
        return &#39;偶&#39;;
    }
    return &#39;奇&#39;;
});
console.log(newStr); // => a奇b偶c奇d偶
ログイン後にコピー

4.9 search(regexp) ：返回查找正则表达式第一个匹配的位置
参数：

①regexp {regexp} ：正则表达式。eg：/\d+/

返回值：

{int} 返回第一个匹配的结果的位置；若没找到匹配结果返回-1

示例：

console.log( &#39;abcd&#39;.search(/\d+/) ); // => -1 ：没有找到数字
console.log( &#39;abcd1234&#39;.search(/\d+/) ); // => 4 ：位置序号为4，返回第一个数字的位置
ログイン後にコピー

4.10 slice(start, |end)：返回从字符串start位置到end前一个位置的子串
参数：

①start {int} ：子串提取的开始位置索引(包括此位置的字符)。

若数字为负，表示从字符串尾部开始计算。如：-1表示倒数一个字符串，-2表示倒数第二个字符。

②end {int} 可选：子串提取的结束位置索引(不包括此位置的字符)。

若数字为负，表示从字符串尾部开始计算。如：-1表示倒数一个字符串，-2表示倒数第二个字符。

若省略此参数，返回从start位置到结束的所有字符。

注意：

子串的提取顺序是从左到有，若start索引位置大于end索引位置，将返回一个空字符串。

返回值：

{string} 返回从字符串start位置到end前一个位置的子串。

示例：

var s = &#39;abcdefg&#39;;
console.log( s.slice(1) ); // bcdefg ：省略end参数，结束位置为末尾
console.log( s.slice(1, 3) ); // bc ：返回从位置序号1到位置序号2(end前一个位置)的子串
console.log( s.slice(-3) ); // efg ：返回从倒数第三个开始到末尾的所有字符
console.log( s.slice(-3, -1) ); // ef ：返回从倒数第三个开始到第二个(end前一个位置)的所有字符
ログイン後にコピー

4.11 split(delimiter, |arrayLength) ：将字符串按照某种分隔符切分成一个由字符串组成的数组并返回
参数：

①delimiter {regexp | string} ：指定的分隔符，可以为正则表达式或字符串。

②arrayLength {int} 可选 ：分割数组的长度。若省略，返回所有分割的子串。

注意：

若分隔符在字符串的第一个或最后一个，将添加一个空字符串到返回的数组。

返回值：

{ string[] } 返回一个由字符串组成的数组。

示例：

console.log( &#39;a,b,c,d,e&#39;.split(&#39;,&#39;) ); // => ["a", "b", "c", "d", "e"]
console.log( &#39;,a,b,c,d,e,&#39;.split(&#39;,&#39;) ); // => ["", "a", "b", "c", "d", "e", ""] ：分隔符在最前或最后面，会添加一个空字符串
console.log( &#39;a,b,c,d,e&#39;.split(&#39;,&#39;,3) ); // => ["a", "b", "c"] ：返回前3个分割的子串
console.log( &#39;a1b2c3d4e&#39;.split(/\d/) ); // => ["a", "b", "c", "d", "e"] ：将数字来做为分隔符
ログイン後にコピー

4.12 substr(start, |wordLength)：返回从字符串start位置开始计算到wordLength个长度的子串
参数：

①start {int} ：子串提取的开始位置索引(包括此位置的字符)。

若数字为负，表示从字符串尾部开始计算。如：-1表示倒数一个字符串，-2表示倒数第二个字符。

②wordLength {int} 可选 ：提取字符的长度。若省略此参数，返回从start位置到结束的所有字符。

返回值：

{string} 返回提取的字符串

示例：

ar s = &#39;abcdefg&#39;;
onsole.log( s.substr(0) ); // =>  abcdefg ：省略第二个参数，返回从位置序号0开始，一直到最后的字符
onsole.log( s.substr(0, 3) ); // => abc ：返回从位置序号0开始，计数3个字符
onsole.log( s.substr(2, 4) ); // => cdef ：返回从位置序号2开始，计数4个字符
onsole.log( s.substr(-2, 3) ); // fg ：返回从倒数第二个字符串开始，计数3个(超过字符长度，就只返回可统计的字符)
ログイン後にコピー
ログイン後にコピー

4.12 substr(start, |wordLength)：返回从字符串start位置开始计算到wordLength个长度的子串
参数：

①start {int} ：子串提取的开始位置索引(包括此位置的字符)。

若数字为负，表示从字符串尾部开始计算。如：-1表示倒数一个字符串，-2表示倒数第二个字符。

②wordLength {int} 可选 ：提取字符的长度。若省略此参数，返回从start位置到结束的所有字符。

返回值：

{string} 返回提取的字符串

示例：

ar s = &#39;abcdefg&#39;;
onsole.log( s.substr(0) ); // =>  abcdefg ：省略第二个参数，返回从位置序号0开始，一直到最后的字符
onsole.log( s.substr(0, 3) ); // => abc ：返回从位置序号0开始，计数3个字符
onsole.log( s.substr(2, 4) ); // => cdef ：返回从位置序号2开始，计数4个字符
onsole.log( s.substr(-2, 3) ); // fg ：返回从倒数第二个字符串开始，计数3个(超过字符长度，就只返回可统计的字符)
ログイン後にコピー
ログイン後にコピー

4.13 substring(start, |end) ：返回从字符串start位置到end前一个位置的子串
参数：

①start {int} ：子串提取的开始位置索引(包括此位置的字符)。数字不能为负数，若为负数按0来处理

②end {int} 可选：子串提取的结束位置索引(不包括此位置的字符)。数字不能为负数，若为负数按0来处理

返回值：

{string} 返回从字符串start位置到end前一个位置的子串。

示例：

var s = &#39;abcdefg&#39;;
console.log( s.substring(0) ); // =>  abcdefg ：省略end参数，返回从位置序号0开始，一直到最后的字符
console.log( s.substring(0, 3) ); // => abc ：返回从位置序号0开始到位置序号2(②参的前一个)的字符
console.log( s.substring(2, 4) ); // => cd ：返回从位置序号2开始到位置序号3(②参的前一个)的字符
console.log( s.substring(-3, 3) ); // abc ：参数若为负，就按数字0来处理，所以此参数实际返回位置序号0到位置序号3的字符
ログイン後にコピー

4.14 toUpperCase() ：将字符串转换为大写并返回

4.15 toUpperCase() ：将字符串转换为小写并返回

4.16 trim() ：移除字符串开头和结尾处的空白字符并返回

以上がJavaScript String オブジェクトのコード例を深く理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
JavaScript ，String
ソース：php.cn
前の記事：JavaScriptの事前解析の原理と実装の詳細な説明 次の記事：JavaScriptでActiveXを呼び出してOracleデータベースを操作する例を詳しく解説
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
から 2024-04-06 19:25:49
0
1
505
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
から 2024-04-06 15:35:24
0
1
274
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
API は postman では動作しますが、Flutter では接続を拒否します postRequest()async{Map\<String,dynamic\>map={'email':'[email protected]','password':...
から 2024-04-06 14:08:33
0
1
340
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート