JavaScript での文字列操作

Nov 25, 2016 am 11:18 AM

JavaScript での文字列操作

1. 概要

ユーザー入力データを処理するとき、DOM オブジェクトの属性を読み取ったり設定したり、Cookie を操作したりするとき、文字列はほとんどどこでも使用されます。 JavaScript のコア部分は、文字列の分割、文字列の大文字と小文字の変更、部分文字列の操作など、一般的な文字列操作のためのプロパティとメソッドのセットを提供します。

現在のほとんどのブラウザでも、正規表現を使用すると多くの文字列操作タスクが大幅に簡素化されるため、正規表現の力の恩恵を受けることができますが、ある程度急な学習曲線を克服する必要もあります。ここでは、主に文字列自体に対するいくつかの操作を紹介します。正規表現については、今後のエッセイで説明します。

2. 文字列の作成

文字列を作成するにはいくつかの方法があります。最も簡単な方法は、一連の文字を引用符で囲むことです。これを文字列変数に割り当てることができます。

    var myStr = "Hello, String!";
ログイン後にコピー

二重引用符または一重引用符を使用して文字列を含めることができますが、文字列を区切る引用符のペアは同じである必要があり、混合できないことに注意してください。

var myString = "Fluffy is a pretty cat.'; のようなステートメントは不正です。

2 種類の引用符の使用を許可し、一方を他方に埋め込むなど、特定の操作を簡素化します:

document.write("<img src=&#39;img/logo.jpg&#39; height=&#39;30&#39; width=&#39;100&#39; alt=&#39;Logo&#39;>");
ログイン後にコピー


上記のスクリプトではいくつかの文字列を作成しましたが、本質的には、これらは実際の文字列オブジェクトではなく、文字列オブジェクトを作成するには、次のステートメントを使用します。 = new String("Hello, String!");

typeof 演算子を使用して、上記の myStr 型が string であり、strObj 型が object であることを確認します

文字列の長さを知りたい場合は、を使用します。長さ属性: string.length.

文字列の指定された位置にある文字を取得するメソッド: string.charAt(index); 1 つ以上の文字列を 1 つの大きな文字列に連結します

解決策:

を使用するだけです。 2 つの文字列を「追加」するには「+」:

var longString = "One piece " + "plus one more piece.";
ログイン後にコピー

複数の文字を連結するには 文字列は 1 つの文字列に累積されます。「+=」演算子も使用できます:

var result = "";
result += "My name is Anders"
result += " and my age is 25";
ログイン後にコピー

改行文字を追加するには文字列にエスケープ文字「n」を使用する必要があります:

var confirmString = "You did not enter a response to the last " +
        "question.\n\nSubmit form anyway?";
var confirmValue = confirm(confirmString);
ログイン後にコピー

ただし、このメソッドは警告や確認ダイアログ ボックスなどの状況でのみ使用できます。このテキストが HTML コンテンツとして表示される場合、無効になります。この場合、「
」を使用して置き換えます:

 
var htmlString = "First line of string.<br>Second line of string.";
document.write(htmlString);
ログイン後にコピー

String オブジェクト concat() メソッドも提供されており、「+」と同じ機能を実行します:

string.concat(value1, value2, ...)
ログイン後にコピー

ただし、concat( ) メソッドは明らかに "+" ほど直感的で簡潔ではありません

4. 文字列の部分文字列にアクセスする問題:

文字列の一部のコピーを取得します

解決策:

を使用します。 substring() またはスライス() メソッド (NN4+、IE4+) の具体的な使用法は以下で説明されています

substring() のプロトタイプは次のとおりです: string.substring(from, to)

最初のパラメータ from は、その開始位置を指定します。元の文字列内の部分文字列 (0 から始まるインデックス); 2 番目のパラメータ to はオプションで、サブ文字を指定します。 文字列は元の文字列の末尾にあります (0 から始まるインデックス)。省略すると、部分文字列は元の文字列の末尾に移動します。

パラメータ from が to パラメータより大きい場合はどうなりますか? JavaScript は部分文字列の開始位置と終了位置を自動的に調整します。つまり、substring() は常に 2 つのパラメーターのうち小さい方から始まり、大きい方で終わります。ただし、開始位置の文字は含まれますが、終了位置の文字は含まれないことに注意してください。

var fullString = "Every dog has his day.";
var section = fullString.substring(0, 4); // section is "Ever".
section = fullString.substring(4, 0);      // section is also "Ever".
section = fullString.substring(1, 1);      // section is an empty string.
section = fullString.substring(-2, 4);     // section is "Ever", same as fullString.substring(0, 4);
ログイン後にコピー

lice() のプロトタイプは次のとおりです: string.slice(start, end)

パラメータ start は部分文字列の開始位置を表し、負の数の場合は、それからの開始位置として理解できます。たとえば、-3 は下から 3 番目から開始することを意味し、パラメータ end は start と同様に負の数も指定でき、その意味は最後から 2 番目の位置の終了も示します。 lice() のパラメータは負の値も指定できるため、substring() よりも柔軟性が高くなりますが、start が end よりも大きい場合は空の文字列が返されます (例は省略)。

もう 1 つのメソッドは substr() で、そのプロトタイプは次のとおりです: string.substr(start, length)

プロトタイプから、そのパラメーターの意味がわかります。 start は開始位置を表し、length は部分文字列の長さを表します。 。 JavaScript 標準では、このメソッドの使用は推奨されていません。

5. 文字列の大文字と小文字の変換

質問:

在你的页面上有文本框接收用户的输入信息,比如城市,然后你会根据他的城市的不同做不同的处理,这时自然会用到字符串比较,那么在比较前,最好进行大小写转换,这样只要考虑转换后的情形即可;或者要在页面上收集数据,然后将这些数据存储在数据库,而数据库恰好只接收大写字符;在这些情况下,我们都要考虑对字符串进行大小写转换。

解决方案:

使用toLowerCase()和toUpperCase()方法:

var city = "ShanGHai";
city = city.toLowerCase();  // city is "shanghai" now.
ログイン後にコピー

六、判断两个字符串是否相等

问题:

比如,你想拿用户的输入值与已知的字符串比较

解决方案:

先将用户的输入值全部转换为大写(或小写),然后再行比较:

var name = document.form1.txtUserName.value.toLowerCase();
    if(name == "urname")
    {
        // statements go here.
    }
ログイン後にコピー

JavaScript有两种相等运算符。一种是完全向后兼容的,标准的"==",如果两个操作数类型不一致,它会在某些时候自动对操作数进行类型转换,考虑下面的赋值语句:

   
var strA = "i love you!";
var strB = new String("i love you!");
ログイン後にコピー

这两个变量含有相同的字符序列,但数据类型却不同,前者为string,后者为object,在使用"=="操作符时,JavaScript会尝试各种求值,以检测两者是否会在某种情况下相等。所以下面的表达式结果为true: strA == strB。

第二种操作符是"严格"的"===",它在求值时不会这么宽容,不会进行类型转换。所以表达式strA === strB的值为false,虽然两个变量持有的值相同。

有时代码的逻辑要求你判断两个值是否不相等,这里也有两个选择:"!="和严格的"!==",它们的关系就类似于"=="和"==="。

讨论:

"=="和"!="在求值时会尽可能地寻找值的匹配性,但你可能还是想在比较前进行显式的类型转换,以"帮助"它们完成工作。比如,如果想判断一个用户的输入值(字符串)是否等于一个数字,你可以让"=="帮你完成类型转换:

  if(document.form1.txtAge.value == someNumericVar) { ... }
ログイン後にコピー

也可以提前转换:

if(parseInt(document.form1.txtAge.value) == someNumericVar) { ... }
ログイン後にコピー

如果你比较习惯于强类型的编程语言(比如C#,Java等),那么这里你可以延续你的习惯(类型转换),这样也会增强程序的可读性。

有一种情况需要注意,就是计算机的区域设置。如果用"<"和">"来比较字符串,那么JavaScript把它们作为Unicode来比较,但显然,人们在浏览网页时不会把文本当作Unicode来阅读:)比如在西班牙语中,按照传统的排序,"ch"将作为一个字符排在"c"和"d"之间。localeCompare()提供了一种方式,可以帮助你使用默认区域设置下的字符排序规则。

var strings; // 要排序的字符串数组,假设已经得到初始化

strings.sort(function(a,b) { return a.localeCompare(b) });  // 调用sort()方法进行排序
ログイン後にコピー

七、字符串的查找

问题:

判断一个字符串是否包含另一个字符串。

解决方案:

使用string的indexOf()方法:

 strObj.indexOf(subString[, startIndex])
ログイン後にコピー

strObj为要进行判断的字符串,subString为要在strObj查找的子字符串,startIndex是可选的,表示查找的开始位置(基于0的索引),如果startIndex省略,则从strObj开始处查找,如果startIndex小于0,则从0开始,如果startIndex大于最大索引,则从最大索引处开始。

indexOf()返回strObj中subString的开始位置,如果没有找到,则返回-1。在脚本中,可以这么使用:

if(largeString.indexOf(shortString) != -1)
    {
        // 如果包含,进行相应处理;
    }
ログイン後にコピー

也许一个字符串会包含另一字符串不止一次,这时第二个参数startIndex也许会派上用场,下面这个函数演示如何求得一个字符串包含另外一个字符串的次数:

function countInstances(mainStr, subStr)
    {
        var count = 0;
        var offset = 0;
        do
        {
            offset = mainStr.indexOf(subStr, offset);
            if(offset != -1)
            {
                count++;
                offset += subStr.length;
            }
        }while(offset != -1)
        return count;
    }
ログイン後にコピー

String对象有一个与indexOf()对应的方法,lastIndexOf():

strObj.lastIndexOf(substring[, startindex])

strObj为要进行判断的字符串,subString为要在strObj查找的子字符串,startIndex是可选的,表示查找的开始位置(基于0的索引),如果startIndex省略,则从strObj末尾处查找,如果startIndex小于0,则从0开始,如果startIndex大于最大索引,则从最大索引处开始。该方法自右向左查找,返回subString在strObj中最后出现的位置,如果没有找到,返回-1。

八、在Unicode值和字符串中的字符间转换

问题:

获得一个字符的Unicode编码值,反之亦然。

解决方案:

要获得字符的Unicode编码,可以使用string.charCodeAt(index)方法,其定义为:

  strObj.charCodeAt(index)
ログイン後にコピー

index为指定字符在strObj对象中的位置(基于0的索引),返回值为0与65535之间的16位整数。例如:

var strObj = "ABCDEFG";
    var code = strObj.charCodeAt(2); // Unicode value of character &#39;C&#39; is 67
ログイン後にコピー

如果index指定的索引处没有字符,则返回值为NaN。

要将Unicode编码转换为一个字符,使用String.fromCharCode()方法,注意它是String对象的一个"静态方法",也就是说在使用前不需要创建字符串实例:

String.fromCharCode(c1, c2, ...)
ログイン後にコピー

它接受0个或多个整数,返回一个字符串,该字符串包含了各参数指定的字符,例如:

var str = String.fromCharCode(72, 101, 108, 108, 111);  // str == "Hello"
ログイン後にコピー

 

讨论:

     Unicode包含了这个世界上很多书写语言的字符集,但别因为Unicode包含一个字符就期望这个字符能够在警告对话框、文本框或页面呈现时正常显示。如果字符集不可用,在页面将显示为问号或其它符号。一台典型的北美的计算机将不能在屏幕上显示中文字符,除非中文的字符集及其字体已经安装。

 以上就是JavaScript中的字符串操作的内容,更多相关内容请关注PHP中文网(www.php.cn)!


このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript:リアルタイム監視システムを実現するためのキーテクノロジー はじめに: インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイム オンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法 今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

JavaScriptでinsertBeforeを使用する方法 JavaScriptでinsertBeforeを使用する方法 Nov 24, 2023 am 11:56 AM

使用法: JavaScript では、insertBefore() メソッドを使用して、DOM ツリーに新しいノードを挿入します。このメソッドには、挿入される新しいノードと参照ノード (つまり、新しいノードが挿入されるノード) の 2 つのパラメータが必要です。

Go 言語上級チュートリアル: 文字列削除操作の詳細な学習 Go 言語上級チュートリアル: 文字列削除操作の詳細な学習 Mar 27, 2024 pm 04:24 PM

Go 言語は非常に人気のあるプログラミング言語であり、その強力な機能により多くの開発者に好まれています。文字列操作はプログラミングで最も一般的な操作の 1 つであり、Go 言語では文字列の削除操作も非常に一般的です。この記事では、Go 言語での文字列削除操作について詳しく説明し、このナレッジ ポイントをよりよく理解して習得するのに役立つ具体的なコード例を使用します。文字列の削除操作 Go 言語では、通常、strings パッケージを使用して、削除操作を含む文字列操作を実行します。

See all articles