JS--マッチした文字列の置換

マッチした文字列の置換

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【置換の対象を正規表現を使って指定する】
String オブジェクトの replace メソッドは、対象の文字列の中の指定した文字列を、別の文字列で置換した新しい文字列を返します。

・書式

文字列.replace(置換する文字列, 新しい文字列)

引数の置換する文字列には固定の文字列を指定することもできますが、正規表現オブジェクトを指定することもできます。

文字列.replace(正規表現, 新しい文字列)

対象の文字列の中で 1 番目で指定した正規表現にマッチした文字列を 2 番目で指定した文字列に置換します。対象の文字列に変更は行わず、置換したあとの新しい文字列が返されます。

・正規表現にグローバルフラグが設定されていない場合
対象の文字列の中の最初に正規表現にマッチした文字列だけが置換される。

・正規表現にグローバルフラグが設定されていた場合
マッチしたすべての文字列が置換される。

サンプル

let str = 'Border Color is Red, Line Color is RED';
let newstr = str.replace(/(Red|RED)/, 'red');

console.log(newstr);実行
> Border Color is red, Line Color is RED

対象の文字列の中に Red または RED が含まれていた場合は red に置換します。　今回のサンプルのように正規表現オブジェクトにグローバルフラグ設定されていない場合は最初にマッチした文字列だけを置換する。

グローバルフラグが設定されている場合のサンプル

let str = 'Border Color is Red, Line Color is RED';
let newstr = str.replace(/(Red|RED)/g, 'red');

console.log(newstr);
> Border Color is red, Line Color is red

グローバルフラグが設定されているため、対象の文字列の中で正規表現にマッチするすべての文字列が置換されました。

【キャプチャグループにマッチした文字列を参照する】

replace メソッドでは置換する新しい文字列としてドル記号($)を使った特別な値を記述することができます。

$&  マッチした部分文字列
$`  マッチした部分の前の文字列
$'  マッチした部分の後の文字列
$$  $の文字

上記に加えて、置換する対象の文字列として正規表現を指定した場合に、正規表現の中でキャプチャグループが含まれている場合は $1, $2, ... を使用することでキャプチャグループでキャプチャされた文字列を参照することができます。

$1, $2, ...  キャプチャグループでキャプチャされた文字列

サンプル

let str = '誕生日は 1994-04-21 です';
let regexp = /(\d{4})-(\d{2})-(\d{2})/;
let newstr = str.replace(regexp, '$1年$2月$3日');

console.log(newstr);
>> 誕生日は 1994年04月21日 です

【置換する新しい文字列として関数を指定する】

replace メソッドの 2 番目の引数には置換する新しい文字列を指定しますが、文字列の代わりにコールバック関数を指定することもできます。
関数を指定した場合は、 1 番目の引数に指定した文字列または正規表現がマッチした時点で関数が呼び出され、関数からの戻り値が新しい値として置換を行います。

文字列.replace(正規表現, 関数) 

関数は呼び出される時に最大で次の引数を受け取ります。必要な数の引数を受け取り、関数のブロック内で置換する文字列を return 文を使って返してください。

match     パターンにマッチした文字列
c1,c2,... パターンにキャプチャグループが含まれる場合にキャプチャした文字列
offset    マッチした文字列の先頭文字のインデックス
str       対象の文字列

サンプル

let str = 'Border Color is GREEN, Line Color is RED';//小文字に変換する
let newstr = str.replace(/[A-Z].+?\b/g, function(match){
  return match.toLowerCase();
});

console.log(newstr);
>> border color is green, line color is red

今回のサンプルでは大文字から始まる単語にマッチする正規表現パターンを指定して置換を行います。
置換する新しい文字列は、コールバック関数内でマッチした文字列をすべて小文字に変換した文字列を return 文で返しています。
グローバルフラグを設定しているので、対象の文字列の中で正規表現にマッチするすべての文字列が置換されます。

JS--正規表示

正規表示

【開発環境】

OS：Win11（64ビット）

VSCode1.72.2、

クロム

 

■正規表示とは→
指定した条件に一致する複数の文字列を一つのパターンで表現する方法です。 JavaScript では正規表現もオブジェクトのひとつです。

 

【正規表現リテラル】
正規表現オブジェクトとは正規表現で使用するパターンを定義することです。最初に正規表現リテラルを使って正規表現オブジェクトを作成する方法です。

・書式

/パターン/
/パターン/フラグ

正規表現のパターンを表す値をスラッシュ(/)で囲んで記述します。
フラグを設定する場合はスラッシュのあとに記述します。

サンプル

let regexp1 = /apple/;
let regexp2 = /[a-zA-Z]{4}/;

一つ目の正規表現オブジェクトは 'apple' とマッチするパターンです。対象の文字列の中に 'apple' と同じ文字列が含まれていればこの正規表現とマッチします。

二つ目の正規表現オブジェクトは特別な意味を持つメタ文字を使って記述したパターンで、アルファベットで構成された 4 文字の文字列とマッチします。

フラグを設定する場合は、フラグを表す値を一つまたは複数記述します。

let regexp1 = /[a-z]{4}/i;
let regexp2 = /[a-z]{4}/im;

一つ目の正規表現オブジェクトには i フラグを設定しており、二つ目の正規表現オブジェクトには i フラグと g フラグを設定しています。

【RegExpコントラスタを使う】
次に RegExp オブジェクトのコンストラクタを使用して正規表現オブジェクトを作成する方法です。

・書式
new RegExp(パターン[, フラグ])
1 番目の引数には正規表現リテラルを指定するか、パターンを表す値を文字列として記述します。

フラグを設定する場合は 2 番目の引数に一つまたは複数のフラグを文字列として記述します。

サンプル

let regexp1 = new RegExp(/lemon/);
let regexp2 = new RegExp('lemon');

どちらも同じ正規表現オブジェクトを作成します。パターンを文字列として指定する場合はスラッシュ(/)で囲う必要はない点に注意してください。

フラグを設定する場合は次のように記述します。

let regexp1 = new RegExp(/lemon/, 'i');
let regexp2 = new RegExp('lemon', 'ig');

正規表現のパターンがあらかじめ決まっているのであれば基本的に正規表現リテラルを使って正規表現オブジェクトを作成するのがシンプルで分かりやすいかと思います。
パターンが決まっていない場合はパターンを文字列として指定できる RegExp コンストラクタを使います。

例文

let regexp1 = /movie/;
let regexp2 = /driving/;
let str = 'I like movies and sports'

console.log(regexp1.test(str));
>> true

console.log(regexp2.test(str));
>> false

RegExp オブジェクトのインスタンスメソッドである test は文字列が正規表現にマッチするかどうかを調べ論理値を返します。

正規表現オブジェクトを 2 つ作成し、対象となる文字列がそれぞれの正規表現オブジェクトとマッチするかどうかを調べました。

対象の文字列には 'movie' が含まれているので最初の正規表現にはマッチしましたが、対象の文字列には 'driving' は含まれていないので次の正規表現にはマッチしませんでした。

 

JS--アロー関数式

アロー関数式

【開発環境】

OS：Win11（64ビット）

VSCode1.72.2、

クロム

【アロー関数式を使った関数の定義】
アロー関数式を使うことで関数リテラルによる関数定義をより簡略化して記述することができます。

 

関数リテラルの場合

let 変数名 = function(引数1, 引数2, ...){
  実行される処理;
  ...

  return 戻り値;
};

アロー関数式の場合

let 変数名 = (引数1, 引数2, ...)　=> {
  実行される処理;
  ...

  return 戻り値;
};

アロー関数式でも関数名は記述しませんので、関数リテラルと同様に変数に代入して利用します。またアロー関数式では function も記述せず、代わりに関数のブロックの前に => を記述します。

 

サンプル

let dispTotal = (x, y) => {
  return x + y;
};

let result = dispTotal(3, 4);
console.log(result);実行
7

アロー関数式は簡潔に関数を定義できることから、関数を引数として渡す場合で直接関数を記述する場合などに使用すると便利です。

function dispNum(x, y, func){
  console.log(func(x, y));
}

dispNum(7, 3, (x, y) => (x + y) / 2);実行する 5

【アロー関数式を使う場合の注意点】
アロー関数式を使う場合、注意点が二つあります

一つ目はアロー関数式を使って定義した関数内では arguments オブジェクトが使用できません。

サンプル

let dispTotal = () => {
  let sum = 0;
  for (let i = 0; i 実行 Uncaught ReferenceError: arguments is not defined

注意点の二つ目は戻り値としてオブジェクトリテラルを返す場合です

アロー関数式の場合、関数ブロック内で実行する処理が return 文だけだった場合、
ブロックをあらわす { と } 、そして return も省略して次のように記述することができました。
(x, y) => x + y;
しかし、この時戻り値がオブジェクトリテラルだった場合、 {プロパティ名:値} と記述する代わりに全体を括弧で囲んで ({プロパティ名:値}) と記述する必要があります。
(x, y) => ({name:x, old:y});

JS--関数の記述位置について

関数の記述位置について

【開発環境】

OS：Win11（64ビット）

VSCode1.72.2、

クロム

 

【関数の記述する位置】
一般的には関数を先に定義しておき、そのあとで関数を呼び出すように記述されるケースが多いですが、関数の定義をあとに記述しても問題はありません。

 

サンプル1

function dispTotal(x,y){

  return x + y ;

}

 

console.log(dispTotal(3,4));

>7

 

サンプル2

console.log(dispTotal(5,1));

 

function dispTotal(x,y){

  return x + y ;

}

 

>6

 

関数の定義を関数の呼び出しよりも先に書いている場合も、後に書いている場合も問題なく関数を呼び出すことができています。

 

【HTMLの中で記述する場合】

＜！DCTYPE　html＞

＜html lang="ja"＞
＜head＞
＜meta charset="UTF-8"＞
＜title＞JavaScript サンプル＜/title＞

＜script＞
function dispStart(){
  console.log('Start');
}
＜/script＞
＜/head＞
＜body＞

＜p＞
JavaScript のサンプルです。
＜/p＞

＜script＞
dispStart();
dispGoal();
＜/script＞

＜p＞
ここまでです。
＜/p＞

＜script＞
function dispGoal(){
  console.log('Goal');
}
＜/script＞
＜/body＞
＜/html＞

実行すると、エラーが表示される
> ReferenceError: dispGoal is not defined

これは、dispGoal 関数を定義する前に、dispGoal 関数を呼び出したからだ。

これを次のように変更する

 

＜！DCTYPE　html＞
＜html lang="ja"＞

＜head＞

＜meta charset="UTF-8"＞

＜title＞JavaScript サンプル＜/title＞

 

＜script＞

function dispStart(){

console.log('Start');

}

＜/script＞

 

＜/head＞

＜body＞

 

＜p＞ JavaScript のサンプルです。 ＜/p＞

 

＜script＞

dispStart();

dispGoal();

function dispGoal(){

console.log('Goal');

}

＜/script＞ 

 

＜p＞ ここまでです。 ＜/p＞

 

＜/body＞

＜/html＞

実行結果
＞Start

＞ Goal

関数の定義が関数の呼び出しよりも後に記述しても問題ないですが、 <script> タグが分かれている場合は関数の定義は関数の呼び出しよりも先に記述されていないとエラーとなります

【関数の中に記述した関数を呼び出す場合】
JavaScript では呼び出す関数がグローバルスコープで定義されていれば、関数の中から別の関数を呼び出すことができます。

サンプル

function dispHello(){
  console.log('Hello');

  dispGood();//関数内関数
}

function dispGood(){
  console.log('Good');
}

dispHello();
> Hello
> Good

呼び出す関数が別の関数内で定義されている場合、関数の外から呼び出そうとすると ReferenceError: dispBye is not defined というエラーとなります。

サンプル

function dispHello(){
  console.log('Hello');

  function dispBye(){
    console.log('Bye');
  }
}

dispHello();
dispBye();

> Hello
> ReferenceError: dispBye is not defined

JS--要素の値を合計する

要素の値を合計する

【開発環境】

OS：Win11（64ビット）

VSCode1.72.2、

クロム

 

【要素の値を合計する方法】

Array オブジェクトの reduce メソッドを使うと、配列に含まれるすべての要素の値を合計し、その合計値を返します。

書式

配列名.reduce( コールバック関数(合計値の保管用, 要素の値), 初期値 )
配列名.filter( コールバック関数(合計値の保管用, 要素の値, 要素のインデックス), 初期値 )
配列名.filter( コールバック関数(合計値の保管用, 要素の値, 要素のインデックス, 配列), 初期値 )

 

reduce メソッドは配列に含まれる要素を先頭から順に取り出しコールバック関数を呼び出します。コールバック関数の中では合計値の保管用の値に現在の要素の値を加算したものを戻り値として返します。最終的に reduce メソッドはすべての要素の合計を行った値を戻り値として返します。

 

サンプル文

let result = [48, 75, 92, 61, 54, 83, 76];
let total = result.reduce(function(sum, element){
  return sum + element;
}, 0);  //初期値を0に設定したため、変数sumには0が設定される

console.log(total);
>> 489

初期値として 0 を指定しているので変数 sum には最初 0 が格納されます。その後、コールバック関数をすべての要素に対して順に呼び出し、コールバック関数は変数 sum に要素の値を加算して戻り値として返します。返された値は sum に格納されます。そして次の要素に対してコールバック関数が呼び出されます。最後に reduce メソッドの戻り値としてすべての要素の値を合計した値が返されます。

アロー関数式を使うと

let result = [48, 75, 92, 61, 54, 83, 76];

let total = result.reduce((sum, element) => sum + element, 0); console.log(total);

> 489