タグつきテンプレート関数の内容が読み解けないので、教えて下さい。

JavaScript Primer 迷わないための入門書 [ES2015] タグつきテンプレート関数より
https://jsprimer.net/basic/string/

// 1度目: ["template ", 0, " literal "]とありますが、
2番目と3番目の要素がどうして「0」と「" literal "」となるのでしょうか。

配列stringsは[ "template ", " literal ", "" ]より、strings[0]が「"template "」となるのは理解出来ます。
でもその次からがよく分かりません。
str,i,values[i-1]はそれぞれどの値に対応しているのでしょうか。
よろしくお願い致します。

JavaScript
1// グローバル汚染を避けるために即時関数を使って全体を囲う。
2(() => {
3
4  // テンプレートを順番どおりに結合した文字列を返すタグ関数
5  function stringRaw(strings, ...values) {
6
7    // resultの初期値はstrings[0]の値となる
8    return strings.reduce((result, str, i) => {
9      console.log([result, values[i - 1], str]);
10
11      // それぞれループで次のような出力となる
12      // 1度目: ["template ", 0, " literal "]
13      // 2度目: ["template 0 literal ", 1, ""]
14      return result + values[i - 1] + str;
15    });
16  }
17
18  // 関数`テンプレートリテラル` という形で呼び出す
19  console.log(stringRaw`template ${0} literal ${1}`); // => "template 0 literal 1"
20})();
21
22/*
23コンソールの結果
24Array(3) [ "template ", 0, " literal " ]
25Array(3) [ "template 0 literal ", 1, "" ]
26template 0 literal 1
27*/