[Nodejs]nodejs組み込みモジュール(on)

ここに画像の説明を挿入

1.nodejsの公式APIドキュメント


Node.js の組み込みモジュールと共通 API については、公式ドキュメントを参照してください。

ドキュメントを参照すると、安定性指数は次のようになります。

  • 赤:時代遅れ。
  • オレンジ:実験。現在のバージョンが利用可能であることを示しますが、他のバージョンは不明です。下位互換性がない可能性があるため、運用環境でこの機能を使用することはお勧めできません。
  • 緑: 安定しています。npm エコシステムとの互換性が最優先事項です。

2.nodejsにおけるモジュールの分類


Node.js アプリケーションはモジュールで構成され、CommonJS モジュール仕様を採用しています。Node.js には 3 種類のモジュールがあります。

  • 内蔵モジュール
  • サードパーティモジュール
  • カスタムモジュール

ここで簡単に紹介します。

2.1 内蔵モジュール

const process = require('process');
const path = require('path');

console.log(process.version);
console.log(path.resolve('../'));

require メソッドはモジュールをロードするために使用されます。

一般的な組み込みモジュールには次のものがあります。

  • FS: ファイルシステムモジュール
  • パス: パスモジュール
  • OS:オペレーティングシステム関連
  • net:ネットワーク関連
  • http

「Node.js はそんなに素晴らしいのですか?」という疑問があるかもしれません。オペレーティング システムと直接対話することもできますか?

この疑問を念頭に置いて、os モジュールを例として Node.js のソース コードを簡単に見てみましょう。

  • OS モジュールのソース コードを開きます: https://github.com/nodejs/node/blob/master/lib/os.js、一番下に移動して、cpus メソッドを見つけます。
  • 見つけてgetCPUs()
  • internalBinding('os'): システムの下部にあるメソッドは、internalBinding を通じて呼び出すことができます。InternalBinding は主に JS 仮想マシンが実行していることです。
  • internalBinding('os')https://github.com/nodejs/node/blob/master/src/node_os.ccの実装はC++ コードでいっぱいです。たとえば、こんなgetCPUs方法があります。

JS 自体には基盤となるシステム リソースを取得する機能がないことがわかりました。これはすべて、基盤となるシステムと対話する JS 仮想マシンによって行われ、JS の形式を通じてアプリケーション層に公開されます。また、C/++で直接記述されたライブラリも多く、コンパイル後にJSアプリケーション層に提供して呼び出したり、直接Node.js層に提供して利用したりします。すべてのプログラミング言語の最下層は、アセンブリ言語も含めて C/C++ に戻ります。

2.2 サードパーティパッケージのロードを要求するメカニズム

const express = require('express');

サードパーティ パッケージのロードを要求するメカニズム:
(1) サードパーティ パッケージがインストールされた後、パッケージは通常、現在のプロジェクトの node_modules フォルダーに保存されます。このパッケージの package.json ファイルを検索し、その中にある main 属性に対応するエントリ モジュールを見つけます。このエントリ モジュールがこのパッケージのエントリ ファイルです。

(2) package.json ファイルがサードパーティのパッケージ内に見つからない場合、または package.json ファイルに main 属性がない場合は、サードパーティのパッケージ内のindex.js ファイルがデフォルトでロードされます。

(3) パッケージがnode_modulesフォルダーに見つからない場合、または上記の条件が見つからない場合、node_modulesフォルダーは上位の親ディレクトリで検索され、検索ルールは上記と同じです。

(4) モジュールのディスク ルート パスが見つからない場合は、「モジュール xxx が見つかりません」というエラーが報告されます。

2.3 カスタムモジュール(モジュール)

各ファイルはモジュールであり、独自のスコープを持っています。ファイル内で定義された変数、関数、クラスはすべてプライベートであり、他のファイルからは見えません。
例:

var example = require('./example.js');
console.log(example.x); // 5
console.log(example.addX(1)); // 6

3.Webサービスhttp


3.1 httpモジュールの概要

ほとんどのnodejs開発者は、Webサーバーを開発する目的でnodejsを選択します。公式 Web サイトに示されているように、http モジュールを使用すると、数行のコードで超ミニ Web サーバーを構築できます。

nodejs では、http がコアモジュールであると言えますが、比較的複雑なモジュールでもあります。始めるのは簡単ですが、深く学ぶと、多くの初心者は頭が痛くなり、どこから始めればよいかわかりません。

この記事では、簡単な例から始めて、http モジュールの 4 つのコアの例を紹介します。この記事を読むと、http モジュールについて全体的に理解できるようになります。

3.2 簡単な例

次の例では、1 つの Web サーバーと 1 つの http クライアントを作成します

サーバー サーバー: クライアントからのリクエストを受け取り、クライアントが要求したアドレスをクライアントに返します。
クライアント client: サーバーへのリクエストを開始し、サーバーから返されたコンテンツをコンソールに出力します。
以下に示すコードは数行ですが、多くの情報が含まれています。次のセクションで簡単に紹介します。

var http = require('http');

// http server 例子
var server = http.createServer(function(serverReq, serverRes){
    
    
    var url = serverReq.url;
    serverRes.end( '您访问的地址是:' + url );
});

server.listen(3000);

// http client 例子
var client = http.get('http://127.0.0.1:3000', function(clientRes){
    
    
    clientRes.pipe(process.stdout);
});

3.3 例の説明

上記の単純な例では、4 つのインスタンスが関係しています。ほとんどの場合、serverReq とserverRes が主役です。

  • サーバー: http.Server インスタンス。サービスを提供し、クライアント要求を処理するために使用されます。
  • client: http.ClientReques インスタンス。サーバーへのリクエストを開始するために使用されます。
  • serverReq/clientRes: 実際、これらはすべて http.IncomingMessage のインスタンスです。serverReq は、リクエスト ヘッダーなど、クライアントが要求した関連情報を取得するために使用され、- clientRes は、サーバーから返された応答ヘッダーなどの関連情報を取得するために使用されます。
  • serverRes: http.ServerResponse インスタンス

3.4 についてhttp.IncomingMessagehttp.ServerResponse

まず例について話しましょうhttp.ServerResponse役割は非常に明確で、サーバーはhttp.ServerResponse インスタンスを通じてリクエスターにデータを送信します。応答ヘッダーの送信、応答本文の送信などが含まれます。

次にhttp.IncomingMessage例ですが、 にserver、clientも出てきているので、初心者の方はどうしても戸惑ってしまいます。それは何をするのか

server: リクエストの送信者に関する情報 (リクエスト メソッド、パス、送信データなど) を取得します。クライアント側: リクエストメソッド、パス、送信データなど、サーバー側から送信された情報を取得します。

http.IncomingMessageこのインスタンスには、注目すべき 3 つの属性があります: methodstatusCodestatusMessage

  • method: サーバー側のインスタンスのみが持っています (つまりserverReq.method)
  • statusCode/statusMessage:client側のインスタンスのみが (ie clientRes.method)を持ちます。

4.ネットワークサービスhttp res


4.1 概要

http モジュールの 4 人の剣士の 1 人である Res は、誰もがよく知っているはずです。Web サービス プログラムは、クライアントから http リクエストを受信した後、正しい応答コンテンツをクライアントに返します。これは res の責任です。

返されるコンテンツには、ステータス コード/ステータスの説明情報、応答ヘッダー、および応答本文が含まれます。いくつかの簡単な例を以下に示します。

var http = require('http');
var server = http.createServer(function(req, res){
    
    
    res.end('ok');
});
server.listen(3000);

4.2 例

次の例では、ステータス コード/ステータスの説明、応答ヘッダー、および応答本文を同時に設定します。とても簡単です。

var http = require('http');

// 设置状态码、状态描述信息、响应主体
var server = http.createServer(function(req, res){
    
    
    res.writeHead(200, 'ok', {
    
    
        'Content-Type': 'text/plain'
    });
    res.end('hello');
});

server.listen(3000);

4.3 ステータスコードとステータス説明情報の設定

resres.writeHead()この目的を達成するために提供されていますres.statusCode/res.statusMessage
たとえば、200/ok を設定したい場合は、次のようにします。

res.writeHead(200, 'ok');

こともできます

res.statusCode = 200;
res.statusMessage = 'ok';

この2つは似ていますが、違いは次のとおりです

  • res.writeHead() 応答ヘッダーの設定などの追加機能を提供できます。
  • レスポンスヘッダ送信時には、res.statusCode/res.statusMessage送信したステータスコード/ステータス説明情報が設定されます。

4.4 レスポンスヘッダーの設定

res は、応答ヘッダーの設定を実装する res.writeHead()ために提供されます。response.setHeader()

たとえば、Content-Type を text-plain に設定したい場合は、次のようにします。

// 方法一
res.writeHead(200, 'ok', {
    
    
    'Content-Type': 'text-plain'
});

// 方法二
res.setHeader('Content-Type', 'text-plain');

両者の違いはどこにあるのでしょうか?

  • res.writeHead() はヘッダーを設定するだけではありません。
  • ヘッダーは res.setHeader() によって設定されており、同じ名前のヘッダーが res.writeHead() によって設定されると、 res.writeHead() の設定が以前の設定をオーバーライドします。

2 番目の違いについては、以下に例を示します。以下のコードでは、最終的な Content-Type は text/plain です。

var http = require('http');

var server = http.createServer(function(req, res){
    
    
    res.setHeader('Content-Type', 'text/html');
    res.writeHead(200, 'ok', {
    
    
        'Content-Type': 'text/plain'
    });
    res.end('hello');
});

server.listen(3000);

次の例では、エラーが直接報告されます。エラーメッセージは次のとおりですError: Can't set headers after they are sent.

var http = require('http');

var server = http.createServer(function(req, res){
    
        
    res.writeHead(200, 'ok', {
    
    
        'Content-Type': 'text/plain'
    });
    res.setHeader('Content-Type', 'text/html');
    res.end('hello');
});

server.listen(3000);

4.5 その他のレスポンスヘッダー操作

追加、削除、変更、確認が一致します。以下に例を示します。この例は単純すぎるため、コードを直接アップロードできません。

// 增
res.setHeader('Content-Type', 'text/plain');

// 删
res.removeHeader('Content-Type');

// 改
res.setHeader('Content-Type', 'text/plain');
res.setHeader('Content-Type', 'text/html');  // 覆盖

// 查
res.getHeader('content-type');

少し異なるのは res.getHeader(name) で、名前は小文字で、戻り値は特別に扱われません。

res.setHeader('Content-Type', 'TEXT/HTML');
console.log( res.getHeader('content-type') );  // TEXT/HTML

res.setHeader('Content-Type', 'text/plain');
console.log( res.getHeader('content-type') );  // text/plain

また、あまり一般的ではないものもあります。

  • res.headersSent: ヘッダーが送信されたかどうか。
  • res.sendDate: デフォルトは true です。ただし、これが true の場合、Date ヘッダーは応答ヘッダーに自動的に設定されます。

4.6 レスポンスボディの設定

主に res.write() と res.end() の 2 つのメソッドを使用します。

res.write() API にはもう少し詳しい情報があるため、公式ドキュメントを読むことをお勧めします。

(1)response.write(chunk[, encoding][, callback])

  • chunk: 応答本文の内容。文字列またはバッファーにすることができます。文字列の場合、エンコード パラメータはエンコード方法を示すために使用されます。(デフォルトはutf8です)
  • encoding: エンコード方式。デフォルトは utf8 です。
  • callback: 応答本文がフラッシュされるときにトリガーされます。(TODO については、もっと詳しい説明が必要です...)
    使い方は難しくありませんが、いくつかの注意事項があります。
  • res.write() が呼び出されたときに res.writeHead() が呼び出されていなかった場合、ヘッダーはフラッシュされます。
  • res.write() は複数回呼び出すことができます。
  • res.write(chunk) が初めて呼び出されるとき、ノードはヘッダー情報とチャンクをクライアントに送信します。2 回目に res.write(chunk) を呼び出すと、ノードはデータをストリーミングしたいと判断します。
    Returns true if the entire data was flushed successfully to the kernel buffer. Returns false if all or part of the data was queued in user memory. 'drain' will be emitted when the buffer is free again.

(2)response.end([data][, encoding][, callback])
res.write()をマスターすれば、res.end()は非常に簡単です。res.end() の目的は、ヘッダーと本文が提供され、今回は応答がここで終了することを Nodejs に伝えることです。

これは糖衣構文に似ており、次の 2 つの呼び出しを組み合わせたものと見なされます。コールバックに関しては、応答が配信されたときにトリガーされます。

res.write(data, encoding);
res.end()

4.7 タイムアウト処理

インターフェイス:response.setTimeout(msecs, callback)
タイムアウト イベントの説明も簡潔です (何ということでしょう)。単語は少なく、情報量が多いため、デモ TODO を用意するのが最善です。
If no 'timeout' listener is added to the request, the response, or the server, then sockets are destroyed when they time out. If you assign a handler on the request, the response, or the server's 'timeout' events, then it is your responsibility to handle timed out sockets.

4.8 イベントclose/finish

  • close:response.end() 呼び出される前に接続が切断されます。このイベントはこの時点でトリガーされます。
  • finish: 応答ヘッダーと本文は送信されました (オペレーティング システムに渡され、送信のためにキューに入れられました) が、クライアントは実際にはデータを受信しません。(このイベントの後、他のイベントは res でトリガーされません)

4.9 その他の珍しい属性/メソッド

  • response.finished: 最初は false で、応答が終了すると true に設定されます。
  • response.sendDate: デフォルトは true です。Date ヘッダーを自動的に設定するかどうか。(デバッグ目的でない限り、HTTP プロトコルに従って必要です。それ以外の場合は false に設定しないでください)
  • response.headersSent: 読み取り専用プロパティ。応答ヘッダーが送信されたかどうか。
  • response.writeContinue(): HTTP/1.1 100 Continue メッセージをクライアントに送信し、サーバーがクライアントのリクエストを受け入れる意思があることを示します。リクエスト本文 (ボディ) の送信を続けてください。(TODO デモか何かを作るといいですね)

5. Web サービス http 要求


5.1 概要

この記事では、req オブジェクトに焦点を当てます。前述したように、これは実際には http.IncomingMessage のインスタンスであり、サーバーとクライアントでの機能は若干異なります。

  • サーバー側: リクエストヘッダーなどのリクエスタの関連情報を取得します。
  • クライアント側: レスポンダーから返された関連情報 (statusCode など) を取得します。

サーバー側の例:

// 下面的 req
var http = require('http');
var server = http.createServer(function(req, res){
    
    
    console.log(req.headers);
    res.end('ok');
});
server.listen(3000);

クライアントの例

// 下面的res
var http = require('http');
http.get('http://127.0.0.1:3000', function(res){
    
    
    console.log(res.statusCode);
});

5.2 プロパティ/メソッド/イベントの分類

http.IncomingMessageのプロパティ/メソッド/イベント。見られます

  • サーバーに固有: URL
  • クライアントに固有: statusCode、statusMessage
タイプ 名前 サーバ クライアント
イベント 中止された
イベント 近い
属性 ヘッダー
属性 rawヘッダー
属性 ステータスコード
属性 ステータスメッセージ
属性 httpバージョン
属性 URL
属性 ソケット
方法 。破壊()
方法 .setTimeout()

5.3 サーバーの例

(1) 例 1: 取得httpVersion/method/url
以下は典型的な HTTP リクエスト メッセージです。その最も重要な内容は、HTTP バージョン、リクエスト メソッド、リクエスト アドレス、リクエスト ヘッダーです。

GET /hello HTTP/1.1
Host: 127.0.0.1:3000
Connection: keep-alive
Cache-Control: no-cache

では、上記の情報を入手するにはどうすればよいでしょうか? 非常にシンプルで、コード上で直接実行できます

// getClientInfo.js
var http = require('http');

var server = http.createServer(function(req, res){
    
    
    console.log( '1、客户端请求url:' + req.url );
    console.log( '2、http版本:' + req.httpVersion );
    console.log( '3、http请求方法:' + req.method );
    console.log( '4、http请求头部' + JSON.stringify(req.headers) );

    res.end('ok');
});

server.listen(3000);

効果は次のとおりです。

1、客户端请求url:/hello
2、http版本:1.1
3、http请求方法:GET
4、http headers:{"host":"127.0.0.1:3000","connection":"keep-alive","cache-control":"no-cache","user-age

(2) 例2: getリクエストパラメータの取得
サーバコードは以下のとおりです。

// getClientGetQuery.js
var http = require('http');
var url = require('url');
var querystring = require('querystring');

var server = http.createServer(function(req, res){
    
    
    var urlObj = url.parse(req.url);
    var query = urlObj.query;
    var queryObj = querystring.parse(query);
    
    console.log( JSON.stringify(queryObj) );
    
    res.end('ok');
});

server.listen(3000);

住所http://127.0.0.1:3000/hello?nick=chyingp&hello=world

サーバーの出力は次のとおりです

{
    
    "nick":"chyingp","hello":"world"}

(3) 例 3: ポストリクエストパラメータの取得
サーバーコードは以下のとおりです。

// getClientPostBody.js
var http = require('http');
var url = require('url');
var querystring = require('querystring');

var server = http.createServer(function(req, res){
    
    
    
    var body = '';  
    req.on('data', function(thunk){
    
    
        body += thunk;
    });

    req.on('end', function(){
    
    
        console.log( 'post body is: ' + body );
        res.end('ok');
    }); 
});

server.listen(3000);

CURL を使用して POST リクエストを作成します。

curl -d 'nick=casper&hello=world' http://127.0.0.1:3000

サーバーは次を出力します。

post body is: nick=casper&hello=world

備考: 投稿リクエストでは、Content-type と投稿本文が異なるとまったく異なるため、興味のある学生はそれを学ぶことができます。
この例の投稿リクエストの場合、HTTP メッセージは次のようになります。

POST / HTTP/1.1
Host: 127.0.0.1:3000
Content-Type: application/x-www-form-urlencoded
Cache-Control: no-cache

nick=casper&hello=world

6.ネットワークサービスhttps


6.1 モジュールの概要

このモジュールの重要性はいくら強調してもしすぎることはありません。ネットワークセキュリティ問題がますます深刻化する今日、Web サイトが HTTPS を採用することは避けられない傾向です。

nodejs では、HTTPS 関連の機能を完了するために https モジュールが提供されています。公式ドキュメントによると、これは http モジュールの使用法と非常に似ています。

この記事は主に次の 2 つの部分で構成されています。

  • クライアントとサーバーの例を通じて、https モジュールについて説明します。
  • 信頼できないセキュリティ証明書を使用して Web サイトにアクセスする方法。(12306を例にします)

紙面の都合上、この記事では HTTPS プロトコルとそれに関連する技術体系についてあまり詳しく説明できませんが、ご質問がございましたら、メッセージを残してください。

6.2 クライアントの例

これは、要求されたアドレスが https プロトコルの下にあることを除いて、http モジュールの使用法と非常に似ています。コードは次のとおりです。

var https = require('https');

https.get('https://www.baidu.com', function(res){
    
    
    console.log('status code: ' + res.statusCode);
    console.log('headers: ' + JSON.stringify(res.headers));

    res.on('data', function(data){
    
    
        process.stdout.write(data);
    });
}).on('error', function(err){
    
    
    console.error(err);
});

6.3 サーバーの例

HTTPS サービスを外部に提供するには、HTTPS 証明書が必要です。すでに HTTPS 証明書をお持ちの場合は、証明書の生成プロセスをスキップできます。そうでない場合は、次の手順を参照してください。
(1) 証明書を生成する
① 証明書を格納するディレクトリを作成します。

mkdir cert
cd cert

②秘密鍵を生成します。

openssl genrsa -out chyingp-key.pem 2048

③ 証明書署名要求を生成します(csr は証明書署名要求の意味です)。

openssl req -new \
  -sha256
  -key chyingp-key.key.pem \
  -out chyingp-csr.pem \
  -subj "/C=CN/ST=Guandong/L=Shenzhen/O=YH Inc/CN=www.chyingp.com"

④ 証明書を生成します。

openssl x509 \
  -req -in chyingp-csr.pem \
  -signkey chyingp-key.pem \
  -out chyingp-cert.pem

(2) HTTPS サーバーの
コードは次のとおりです。

var https = require('https');
var fs = require('fs');

var options = {
    
    
    key: fs.readFileSync('./cert/chyingp-key.pem'), // 私钥
    cert: fs.readFileSync('./cert/chyingp-cert.pem') // 证书
};

var server = https.createServer(options, function(req, res){
    
    
    res.end('这是来自HTTPS服务器的返回');
});

server.listen(3000);

ドメイン名 www.chyingp.com を持っていないので、最初にローカル ホストを構成します

127.0.0.1 www.chyingp.com

サービスを開始し、ブラウザでアクセスします http://www.chyingp.com:3000証明書が信頼できないというメッセージがブラウザーに表示されることに注意してください。「信頼」をクリックしてアクセスを続けてください。

7. URL インターフェース (組み込みモジュール URL の代わりに使用)


nodejs内置模块url有些方法要被废弃,我们使用URL类代替

ブラウザーは、URL の構築、解析、エンコードに使用されるコンストラクターである URL() インターフェイスをネイティブに提供します。通常、このコンストラクターは window.URL を通じて取得できます。

7.1 URL モジュールと URL クラスの比較\

属性 URLモジュール URLクラス
プロトコル
ホスト
ポート
ホスト名
検索
クエリ -
-
パス名
href
ハッシュ
-

query,path,origin
2 つのオブジェクトを出力した出力である 3 つのフィールドだけが異なることがわかります。

// url模块,url.parse('link')
{
    
    
  protocol: 'https:',
  slashes: true,
  auth: null,
  host: 'm.shop.com',
  port: null,
  hostname: 'm.shop.com',
  hash: '#detail',
  search: '?id=4433&name=%E6%9D%8E%E5%A4%87&directCompanyId=&mobile=18951431099',
  query: 'id=4433&name=%E6%9D%8E%E5%A4%87&directCompanyId=&mobile=18951431099',
  pathname: '/home/share',
  path: '/home/share?id=4433&name=%E6%9D%8E%E5%A4%87&directCompanyId=&mobile=18951431099',
  href: 'https://m.shop.com/home/share?id=4433&name=%E6%9D%8E%E5%A4%87&directCompanyId=&mobile=18951431099#detail'
}
// new URL()
{
    
    
  href: 'https://m.shop.com/home/share?id=4433&name=%E6%9D%8E%E5%A4%87&directCompanyId=&mobile=18951431099#detail',
  origin: 'https://m.shop.com',
  protocol: 'https:',
  username: '',
  password: '',
  host: 'm.shop.com',
  hostname: 'm.shop.com',
  port: '',
  pathname: '/home/share',
  search: '?id=4433&name=%E6%9D%8E%E5%A4%87&directCompanyId=&mobile=18951431099',
  searchParams: URLSearchParams {
    
    
    'id' => '4433',
    'name' => '李备',
    'directCompanyId' => '',
    'mobile' => '18951431099' },
  hash: '#detail'
}

7.2 コンストラクター

URL() はコンストラクターとして URL インスタンスを生成できます。URL を表す文字列をパラメータとして受け取ります。パラメータが有効な URL ではない場合、エラーが報告されます。

var url = new URL('http://www.example.com/index.html');
url.href
// "http://www.example.com/index.html"

上記の例では、指定された URL を表す URL インスタンスを生成します。

URL() への引数は、文字列の代わりに別の URL インスタンスにすることもできます。このとき、URL() はインスタンスの href 属性を実パラメータとして自動的に読み込みます。

URL 文字列が相対パスの場合、計算の基礎として絶対パスを表す 2 番目のパラメータが必要です。

var url1 = new URL('index.html', 'http://example.com');
url1.href
// "http://example.com/index.html"

var url2 = new URL('page2.html', 'http://example.com/page1.html');
url2.href
// "http://example.com/page2.html"

var url3 = new URL('..', 'http://example.com/a/b.html')
url3.href
// "http://example.com/"

上記のコードでは、返された URL インスタンスのパスは、2 番目のパラメーターに基づいて最初のパラメーターに切り替えることによって取得されます。最後の例では、最初のパラメータは ... で、上位層のパスを示します。

7.3 インスタンスの属性

URL インスタンスの属性は基本的に Location オブジェクトの属性と同じであり、現在の URL の情報が返されます。

  • URL.href: URL全体を返します。
  • URL.protocol: コロンで終わるプロトコルを返します。
  • URL.hostname: ドメイン名を返します。
  • URL.host: : 番号を含むドメイン名とポートを返します。デフォルトのポート 80 と 443 は省略されます。
  • URL.port: ポートを返します。
  • URL.origin: プロトコル、ドメイン名、ポートを返します。
  • URL.pathname: スラッシュ / で始まるパスを返します。
  • URL.search: 疑問符?で始まるクエリ文字列を返します。
  • URL.searchParams: URLSearchParams のインスタンスを返します。これは Location オブジェクトでは使用できません。
  • URL.hash: シャープ記号 # で始まるフラグメント識別子を返します。
  • URL.password: ドメイン名の前にパスワードを返します。
  • URL.username: ドメイン名の前にユーザー名を返します。
var url = new URL('http://user:[email protected]:4097/path/a.html?x=111#part1');

url.href
// "http://user:[email protected]:4097/path/a.html?x=111#part1"
url.protocol
// "http:"
url.hostname
// "www.example.com"
url.host
// "www.example.com:4097"
url.port
// "4097"
url.origin
// "http://www.example.com:4097"
url.pathname
// "/path/a.html"
url.search
// "?x=111"
url.searchParams
// URLSearchParams {}
url.hash
// "#part1"
url.password
// "passwd"
url.username
// "user"

これらの属性のうち、origin 属性のみが読み取り専用で、他の属性は書き込み可能であり、すぐに有効になります。

var url = new URL('http://example.com/index.html#part1');

url.pathname = 'index2.html';
url.href // "http://example.com/index2.html#part1"

url.hash = '#part2';
url.href // "http://example.com/index2.html#part2"

上記のコードでは、URL インスタンスのパス名属性とハッシュ属性を変更すると、URL インスタンスにリアルタイムで反映されます。

8.URLSearchParamsオブジェクト (querystring組み込みモジュールの代わりに使用)


  • Nodejs 組み込みモジュールのクエリ文字列の一部のメソッドは破棄されます。代わりに URLSearchParams API 構造を使用します。
  • nodejs のバージョンが 18 より大きい場合は、const querystring = require('node:querystring') を使用できます。「querystring は URLSearchParams よりもパフォーマンスが優れています」が、
  • 標準化された API ではありません。URLSearchParamsパフォーマンスが重要ではない場合、またはブラウザ コードとの互換性が必要な場合に使用します。

qs モジュールをインストールすることもできます。これはクエリ文字列と同じ方法で使用されます。

8.1 概要

URLSearchParamsこのオブジェクトは、URL のクエリ文字列 (つまり、URL の疑問符の後の部分) を構築、解析、処理するために使用されるブラウザのネイティブ オブジェクトです。

これは、インスタンスを生成できるコンストラクター自体でもあります。パラメータは、先頭に疑問符があるかどうかにかかわらず、クエリ文字列にすることができます?また、クエリ文字列に対応する配列またはオブジェクトにすることもできます。

// 方法一:传入字符串
var params = new URLSearchParams('?foo=1&bar=2');
// 等同于
var params = new URLSearchParams(document.location.search);

// 方法二:传入数组
var params = new URLSearchParams([['foo', 1], ['bar', 2]]);

// 方法三:传入对象
var params = new URLSearchParams({
    
    'foo' : 1 , 'bar' : 2});

URLSearchParamsクエリ文字列は自動的にエンコードされます。

var params = new URLSearchParams({
    
    'foo': '你好'});
params.toString() // "foo=%E4%BD%A0%E5%A5%BD"

上記のコードでは、foo の値は中国語の文字であり、URLSearchParams自動的に URL エンコードされます。

ブラウザがフォーム データをサーバーに送信するとき、URLSearchParamsインスタンスをフォーム データとして直接使用できます。

const params = new URLSearchParams({
    
    foo: 1, bar: 2});
fetch('https://example.com/api', {
    
    
  method: 'POST',
  body: params
}).then(...)

上記のコードでは、fetch コマンドがサーバーにコマンドを送信するときに、URLSearchParams インスタンスを直接使用できます。

URLSearchParamsURL() インターフェイスと組み合わせて使用​​できます。

var url = new URL(window.location);
var foo = url.searchParams.get('foo') || 'somedefault';

上記のコードでは、URL インスタンスの searchParams 属性は URLSearchParams インスタンスであるため、URLSearchParams インターフェイスの get メソッドを使用できます。

URLSearchParamsインスタンスにはトラバーサー インターフェイスがあり、for...of ループでトラバースできます。

var params = new URLSearchParams({
    
    'foo': 1 , 'bar': 2});

for (var p of params) {
    
    
  console.log(p[0] + ': ' + p[1]);
}
// foo: 1
// bar: 2

URLSearchParamsインスタンス プロパティはなく、インスタンス メソッドのみがあります。

8.2URLSearchParams.toString()

toStringこのメソッドはインスタンスの文字列形式を返します。

var url = new URL('https://example.com?foo=1&bar=2');
var params = new URLSearchParams(url.search);

params.toString() // "foo=1&bar=2'

文字列が必要な場合は、toString メソッドが自動的に呼び出されます。

var params = new URLSearchParams({
    
    version: 2.0});
window.location.href = location.pathname + '?' + params;

上記のコードでは、location.href値を割り当てるときにオブジェクトを直接使用できますparamsその後、メソッドが自動的に呼び出されますtoString

8.3URLSearchParams.has()

has()このメソッドは、クエリ文字列に指定されたキー名が含まれているかどうかを示すブール値を返します。

var params = new URLSearchParams({
    
    'foo': 1 , 'bar': 2});
params.has('bar') // true
params.has('baz') // false

8.4 URLSearchParams.get()URLSearchParams.getAll()

get()このメソッドは、クエリ文字列内の指定されたキーを読み取るために使用されます。キー名を引数として受け取ります。

var params = new URLSearchParams('?foo=1');
params.get('foo') // "1"
params.get('bar') // null

注意が必要な箇所が2箇所あります。まず、文字列を返します。元の値が数値の場合は、型を変換する必要があります。次に、指定されたキー名が存在しない場合、戻り値は null になります。

同じ名前のキーが複数ある場合、get は先頭のキーの値を返します。

var params = new URLSearchParams('?foo=3&foo=2&foo=1');
params.get('foo') // "3"

上記のコードでは、クエリ文字列に 3 つの foo キーがあり、get メソッドは最初のキー値 3 を返します。

getAll()このメソッドは、メンバーがすべて、指定されたキーのキー値である配列を返します。キー名を引数として受け取ります。

var params = new URLSearchParams('?foo=1&foo=2');
params.getAll('foo') // ["1", "2"]

上記のコードでは、クエリ文字列には 2 つの foo キーがあり、getAll によって返される配列には 2 つのメンバーがあります。

8.5URLSearchParams.keys(),URLSearchParams.values(),URLSearchParams.entries()

3 つのメソッドはすべて、for...of ループが通過するトラバーサー オブジェクトを返します。それらの違いは、keys メソッドはキー名のトラバーサを返し、values メソッドはキー値のトラバーサを返し、エントリはキーと値のペアのトラバーサを返すことです。

var params = new URLSearchParams('a=1&b=2');

for(var p of params.keys()) {
    
    
  console.log(p);
}
// a
// b

for(var p of params.values()) {
    
    
  console.log(p);
}
// 1
// 2

for(var p of params.entries()) {
    
    
  console.log(p);
}
// ["a", "1"]
// ["b", "2"]

URLSearchParams が直接走査される場合、エントリ インターフェイスが実際には内部で呼び出されます。

for (var p of params) {
    
    }
// 等同于
for (var p of params.entries()) {
    
    }

9.qsモジュール


qsnpmウェアハウスで管理されているパッケージであり、npm install qsコマンドでインストールできます。

  • qs.parse()URL をオブジェクトに解析します
  • qs.stringify()& で結合してオブジェクトを URL 形式にシリアル化します。
const qs = require('qs');

1.qs.parse()
const str = "username='admin'&password='123456'";
console.log(qs.parse(str)); 
// Object { username: "admin", password: "123456" }

2.qs.stringify()
const a = qs.stringify({
    
     username: 'admin', password: '123456' });
console.log(a); 
// username=admin&password=123456
qs.stringify() <---> JSON.stringify()  //有什么区别?

var a = {
    
    name:'hehe',age:10};
qs.stringify  //序列化结果如
name=hehe&age=10
--------------------
// 而JSON.stringify序列化结果如下:
"{"a":"hehe","age":10}"

おすすめ

転載: blog.csdn.net/weixin_43094619/article/details/131901185