JSチュートリアル

JSホーム JSの紹介 JSどこへ JS出力 JSステートメント JS構文 JSコメント JS変数 JS Let JSConst JSオペレーター JS算術 JS割り当て JSデータ型 JS関数 JSオブジェクト JSイベント JS文字列 JS文字列メソッド JS文字列検索 JS文字列テンプレート JS番号 JS番号メソッド JSアレイ JS配列メソッド JS配列ソート JSアレイの反復 JSアレイ定数 JSの日付 JSの日付形式 JS DateGetメソッド JS日付設定メソッド JS数学 JSランダム JSブール値 JSの比較 JS条件 JSスイッチ JSループFor JSループフォーイン JSループの JSループWhile JSブレイク JSIterables JSセット JSマップ JS Typeof JS型変換 JSビット単位 JS RegExp JSエラー JSスコープ JSホイスト JS厳密モード JSこのキーワード JSアロー関数 JSクラス JS JSON JSデバッグ JSスタイルガイド JSのベストプラクティス JSの間違い JSパフォーマンス JS予約語

JSバージョン

JSバージョン JS 2009(ES5) JS 2015(ES6) JS 2016 JS 2017 JS 2018 JS IE /エッジ JSの歴史

JSオブジェクト

オブジェクト定義 オブジェクトのプロパティ オブジェクトメソッド オブジェクト表示 オブジェクトアクセサー オブジェクトコンストラクター オブジェクトのプロトタイプ オブジェクト反復可能 オブジェクトセット オブジェクトマップ オブジェクトリファレンス

JS関数

関数の定義 関数パラメーター 関数の呼び出し 関数呼び出し 機能適用 関数クロージャ

JSクラス

クラスイントロ クラス継承 クラス静的

JS非同期

JSコールバック JS非同期 JSの約束 JS Async / Await

JS HTML DOM

DOMイントロ DOMメソッド DOMドキュメント DOM要素 DOM HTML DOMフォーム DOM CSS DOMアニメーション DOMイベント DOMイベントリスナー DOMナビゲーション DOMノード DOMコレクション DOMノードリスト

JSブラウザBOM

JSウィンドウ JS画面 JSロケーション JSの歴史 JSナビゲーター JSポップアップアラート JSタイミング JSクッキー

JS Web API

WebAPIイントロ WebフォームAPI Web履歴API WebストレージAPI WebワーカーAPI Web Fetch API Web Geolocation API

JS AJAX

AJAXイントロ AJAX XMLHttp AJAXリクエスト AJAX応答 AJAXXMLファイル AJAX PHP AJAX ASP AJAXデータベース AJAXアプリケーション AJAXの例

JS JSON

JSONイントロ JSON構文 JSONとXML JSONデータ型 JSON解析 JSON文字列化 JSONオブジェクト JSON配列 JSONサーバー JSON PHP JSON HTML JSON JSONP

JSとjQuery

jQueryセレクター jQuery HTML jQuery CSS jQuery DOM

JSグラフィックス

JSグラフィックス JSキャンバス JSPlotly JS Chart.js JSグーグルチャート JS D3.js

JSの例

JSの例 JS HTML DOM JSHTML入力 JSHTMLオブジェクト JSHTMLイベント JSブラウザ JSエディター JS演習 JSクイズ JS証明書

JSリファレンス

JavaScriptオブジェクト HTMLDOMオブジェクト


JavaScript文字列メソッド


文字列メソッドは、文字列を操作するのに役立ちます。


文字列のメソッドとプロパティ

「JohnDoe」のようなプリミティブ値は、プロパティまたはメソッドを持つことができません(オブジェクトではないため)。

ただし、JavaScriptでは、メソッドとプロパティを実行するときにJavaScriptがプリミティブ値をオブジェクトとして扱うため、メソッドとプロパティもプリミティブ値で使用できます。


JavaScriptの文字列の長さ

このlengthプロパティは、文字列の長さを返します。

let txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let length = txt.length;

文字列パーツの抽出

文字列の一部を抽出するには、次の3つの方法があります。

  • slice(start, end)
  • substring(start, end)
  • substr(start, length)

JavaScript文字列slice()

slice() 文字列の一部を抽出し、抽出した部分を新しい文字列で返します。

このメソッドは、開始位置と終了位置(終了は含まれません)の2つのパラメーターを取ります。

この例では、文字列の一部を位置7から位置12(13-1)にスライスします。

let str = "Apple, Banana, Kiwi";
let part = str.slice(7, 13);

ノート

JavaScriptはゼロから位置をカウントします。

最初の位置は0です。

2番目の位置は1です。

パラメータが負の場合、位置は文字列の末尾からカウントされます。

この例では、文字列の一部を位置-12から位置-6にスライスします。

let str = "Apple, Banana, Kiwi";
let part = str.slice(-12, -6);

2番目のパラメーターを省略すると、メソッドは残りの文字列をスライスします。

let part = str.slice(7);

または、最後から数えて:

let part = str.slice(-12);


JavaScript文字列substring()

substring()に似ていslice()ます。

違いは、substring()負のインデックスを受け入れることができないことです。

let str = "Apple, Banana, Kiwi";
let part = str.substring(7, 13);

2番目のパラメーターを省略するsubstring()と、残りの文字列が切り取られます。


JavaScript文字列substr()

substr()に似ていslice()ます。

違いは、2番目のパラメーター が抽出されたパーツの長さを指定することです。

let str = "Apple, Banana, Kiwi";
let part = str.substr(7, 6);

2番目のパラメーターを省略するsubstr()と、残りの文字列が切り取られます。

let str = "Apple, Banana, Kiwi";
let part = str.substr(7);

最初のパラメーターが負の場合、位置は文字列の末尾からカウントされます。

let str = "Apple, Banana, Kiwi";
let part = str.substr(-4);

文字列コンテンツの置き換え

このreplace()メソッドは、指定された値を文字列内の別の値に置き換えます。

let text = "Please visit Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");

ノート

このreplace()メソッドは、呼び出された文字列を変更しません。

このreplace()メソッドは新しい文字列を返します。

デフォルトでは、このメソッドは最初の一致のみreplace()を置き換えます。

let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");

デフォルトでは、このreplace()メソッドでは大文字と小文字が区別されます。MICROSOFT(大文字)の記述は機能しません:

let text = "Please visit Microsoft!";
let newText = text.replace("MICROSOFT", "W3Schools");

大文字と小文字を区別しないようにするには、正規表現/iフラグ(大文字と小文字を区別しない)で使用します。

let text = "Please visit Microsoft!";
let newText = text.replace(/MICROSOFT/i, "W3Schools");

ノート

正規表現は引用符なしで記述されます。

すべての一致を置き換えるには、正規表現/gフラグ付きで使用します(グローバル一致)。

let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace(/Microsoft/g, "W3Schools");

ノート

JavaScriptの正規表現の章で、正規表現についてさらに詳しく学習します


大文字と小文字への変換

文字列は大文字に変換されますtoUpperCase()

文字列は次のように小文字に変換されますtoLowerCase()


JavaScript文字列toUpperCase()

let text1 = "Hello World!";
let text2 = text1.toUpperCase();

JavaScript文字列toLowerCase()

let text1 = "Hello World!";       // String
let text2 = text1.toLowerCase();  // text2 is text1 converted to lower

JavaScript文字列concat()

concat()2つ以上の文字列を結合します:

let text1 = "Hello";
let text2 = "World";
let text3 = text1.concat(" ", text2);

concat()plus演算子の代わりにこのメソッドを使用できます。これらの2行は同じことをします:

text = "Hello" + " " + "World!";
text = "Hello".concat(" ", "World!");

ノート

すべての文字列メソッドは新しい文字列を返します。元の文字列は変更されません。

正式に言った:

文字列は不変です。文字列は変更できず、置き換えるだけです。


JavaScript文字列trim()

このtrim()メソッドは、文字列の両側から空白を削除します。

let text1 = "      Hello World!      ";
let text2 = text1.trim();

JavaScript文字列パディング

ECMAScript 2017では、2つのStringメソッドが追加されました。文字列の最初padStartpadEnd最後のパディングをサポートするためです。


JavaScript文字列padStart()

let text = "5";
let padded = text.padStart(4,0);

ブラウザのサポート

padStart()ECMAScript2017の機能です。

最新のすべてのブラウザでサポートされています。

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

padStart()InternetExplorerではサポートされていません。


JavaScript文字列padEnd()

let text = "5";
let padded = text.padEnd(4,0);

ブラウザのサポート

padEnd()ECMAScript2017の機能です。

最新のすべてのブラウザでサポートされています。

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

padEnd()InternetExplorerではサポートされていません。


文字列文字の抽出

文字列文字を抽出するには、次の3つの方法があります。

  • charAt(position)
  • charCodeAt(position)
  • プロパティへのアクセス[]

JavaScript文字列charAt()

このcharAt()メソッドは、文字列内の指定されたインデックス(位置)にある文字を返します。

let text = "HELLO WORLD";
let char = text.charAt(0);

JavaScript文字列charCodeAt()

このcharCodeAt()メソッドは、文字列内の指定されたインデックスにある文字のUnicodeを返します。

このメソッドは、UTF-16コード(0〜65535の整数)を返します。

let text = "HELLO WORLD";
let char = text.charCodeAt(0);

プロパティへのアクセス

ECMAScript 5(2009)は、文字列に対するプロパティアクセス[]を許可します。

let text = "HELLO WORLD";
let char = text[0];

ノート

プロパティへのアクセスは少し予測できない場合があります。

  • 文字列を配列のように見せます(ただし、そうではありません)
  • If no character is found, [ ] returns undefined, while charAt() returns an empty string.
  • It is read only. str[0] = "A" gives no error (but does not work!)

Example

let text = "HELLO WORLD";
text[0] = "A";    // Gives no error, but does not work

Converting a String to an Array

If you want to work with a string as an array, you can convert it to an array.

JavaScript String split()

A string can be converted to an array with the split() method:

Example

text.split(",")    // Split on commas
text.split(" ")    // Split on spaces
text.split("|")    // Split on pipe

If the separator is omitted, the returned array will contain the whole string in index [0].

If the separator is "", the returned array will be an array of single characters:

Example

text.split("")

Complete String Reference

For a complete String reference, go to our:

Complete JavaScript String Reference.

The reference contains descriptions and examples of all string properties and methods.

Test Yourself With Exercises

Exercise:

Convert the text into an UPPERCASE text:

let txt = "Hello World!";
txt = txt.;